Chart.js PolarArea图表。将标签更改为45度角 [英] Chart.js PolarArea Chart. Changing the labels to a 45 degree angle

问题描述

我在网上搜索如何解决此问题均未成功。我见过人们使用背景图像，但这似乎是懒惰且无益的。我想将标签移动到45度角，这样看起来更专业。

I have searched through the net with no success on how to solve this. I have seen people use a background image but that seems lazy and unhelpful. I want to move the labels to a 45 degree angle so it looks more professional.

我的图表当前看起来像这样-

My chart currently looks like this -

但是我希望它看起来像这样-

But I am wanting it to look like this -

任何人对我该如何做有任何想法？

Anyone have any ideas on how I can do this?

下面是我的代码副本。

    new Chart(DummyChart, {
      type: "polarArea",
      data: {
        labels: ["Dummy1", "Dummy 2", "Dummy 3", "Dummy 4"],
        datasets: [
          {
            data: [125, 375, 300, 240],
            backgroundColor: "#57C5C8",
            borderWidth: 4,
            hoverBorderColor: "white",
            label: "Dummy Dummy "
          }
        ]
      },
      options: {
        cutoutPercentage: 20,
        legend: {
          display: false
        },
        layout: {
          padding: 0
        },
        scale: {
          ticks: {
            max: 450,
            maxTicksLimit: 1,
            display: false
          },
          angleLines: {
            display: true
          },
          pointLabels: {
            display: true
          }
        },
        plugins: {
          datalabels: {
            display: false
          }
        }
      }
    });

推荐答案

这是我使用datalables插件的解决方案。

Here's my solution with the datalables plugin.

https： //jsbin.com/bigedugasi/1/edit?html,js,output

我已经更新了以前的解决方案，以使图表具有响应性。

I have updated my previous solutions to make the chart responsive.

    plugins: {
      datalabels: {
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex];
        },
        anchor: 'start',
        align: 'end',
        offset: 0 // Gets updated
      }
    },
    onResize: function() {
      let width = document.getElementById("pie-chart").width
      let padding = myChart.options.layout.padding
      myChart.options.plugins.datalabels.offset = width/2-padding
    }

这篇关于Chart.js PolarArea图表。将标签更改为45度角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！