如何使用 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

需要设置rotation参数：

 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