如何使用 Chart.js（圆环图）旋转到数据集的中心

Question

我正在使用最新版本的 Chart.js 并使用圆环图类型。我对如何找到数据集的中心并旋转到它有疑问。

当我点击一些数据标签时，我需要数据集的中心转到 startPosition 0。

我知道 Chart.js 有一个 rotation option，但我不知道如何找到要旋转到它的数据集的中心。

请记住，数据集是动态的。所以每次我点击每个数据标签时，我都必须找到它们的中心。

这是我的图表代码：

 const data = {
  datasets: [
    {
      label: 'My First Dataset',
      data: [300, 50, 100], // this will be dynamic
      backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
      hoverOffset: 4,
    },
  ],
};

const config = {
  type: 'doughnut' as ChartType,
  data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom' as any,
      },
      title: {
        display: true,
        text: 'Chart.js Doughnut Chart',
      },
    },
  },
};

这是我需要的：

这里是数据集元数据：

我该怎么做？

Answer 1

您需要设置旋转参数：

 const data = {
  datasets: [
    {
      label: 'My First Dataset',
      data: [300, 50, 100],
      backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
      hoverOffset: 4,
      rotation: -90,
    },
  ],
};

如果你想让最大的馅饼的中心在顶部，那么你需要执行这个公式：-(choosenData/2)/(sumOfData)*360。在你的情况下 -300/2/450*360.

如果你想申请每个饼，那么你需要改变数据的顺序（数据元素，backougrndColor等），并作为第一个值设置居中。

数据元素 50 的示例：

 const data = {
  datasets: [
    {
      label: 'My First Dataset',
      data: [50, 100, 300],
      backgroundColor: ['rgb(54, 162, 235)', 'rgb(255, 205, 86)', 'rgb(255, 99, 132)'],
      hoverOffset: 4,
      rotation: -25/450*360,
    },
  ],
};

文档：Doughnut and Pie Charts, General

如何使用 Chart.js（圆环图）旋转到数据集的中心

How to rotate to center of a dataset using Chart.js (Doughnut chart)

javascript

geometry

chart.js

react-chartjs