javascript - 如何使用 Chart.js(圆环图)旋转到数据集的中心
问题描述
我正在使用最新版本的Chart.js并使用圆环图类型。我对如何找到数据集的中心并旋转到它有疑问。
当我点击一些数据标签时,我需要数据集的中心转到 startPosition 0。
我知道 Chart.js 有一个旋转选项,但我不知道如何找到要旋转到它的数据集的中心。
请记住,数据集将是动态的。所以每次我点击每个数据标签时,我都必须找到它们的中心。
这是我的图表代码:
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',
},
},
},
};
这就是我需要的:
这里是数据集元:
我怎样才能做到这一点?
解决方案
您需要设置旋转参数:
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,
},
],
};
文档:甜甜圈和饼图,一般