Chart.js 极地面积图。将标签更改为 45 度角

IT技术 javascript reactjs chart.js
2021-05-02 06:55:58

我已经通过网络搜索了如何解决这个问题，但没有成功。我见过人们使用背景图片，但这似乎很懒惰且无济于事。我想将标签移动到 45 度角，使其看起来更专业。

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

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

在此处输入图片说明

有人对我如何做到这一点有任何想法吗？

我的代码的副本在下面。

    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
          }
        }
      }
    });
2个回答

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

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

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

    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
    }

我已经从HeadhunterKev更新了源代码，插件标签被删除。

这个想法是使用startAngle: 20和 CSS Transform 来旋转图表。

new Chart(document.getElementById("pie-chart"), {
      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
        },
        startAngle: 20,
        scale: {
          ticks: {
            max: 450,
            maxTicksLimit: 1,
            display: false
          },
          angleLines: {
            display: true
          },
          pointLabels: {
            display: true
          }
        }
      }
    });
#pie-chart{
  transform: rotate(-25deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<div>
    <canvas id="pie-chart" width="200" height="200"></canvas>
  </div>

请运行 Code Snipped 查看结果，请优化旋转值以获得最佳结果。

其它你可能感兴趣的问题
上一篇是否可以用风扇提取打印部分？ 下一篇Fusion360客户端有什么作用？