在ChartJ中，使用极坐标区域图来独立显示百分比和值

Question

我希望能够在chartjs的单极区图上独立显示百分比和值。例如，我想像饼图一样设置市场份额的百分比，但用圆圈表示的值显示每个细分市场的利润，以及相对于这些值的高度，而不是百分比。

我知道，传统的极坐标图只是在图表上绘制数值和百分比。我想将两者分开，这样我就可以决定百分比，然后将值设置为更有意义的值。

这可能吗？这里有一个指向代码笔的链接，显示了其他人对chartjs极坐标图的实现。我玩过它，但到目前为止还没有取得任何进展。

Codepen极坐标图示例

这是代码：

var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7]
}]
}

但我看不出有任何方法可以输入两组数据，一组是百分比，另一组是数值。

这里找到的api只引用角度，而不是设置角度的方法。api中有什么东西(我可能缺少(可以帮助我绕过这个问题吗？

Answer 1

我知道这是一个老问题，但如果我理解正确，这是完全可行的。然而，我很难在任何地方找到解决方案，不得不自己设计一个。"极坐标图"的默认行为是使每个线段具有相同的角度。但是，在选项中为每个切片设置不同的角度是很容易的。我想这样做，使一个细分市场的半径可以代表其自身目标的一个百分比，而切片的角度代表该目标对整体贡献的大小(将半径的产品销售预算和产品销售对公司总销售预算的贡献作为角度(。

设置图表时，关键是options.elements.arc属性。可以传入一组值，并调整每个线段的角度。只要总数加上360，你的极坐标图中就会有一个完整的圆圈：

new Chart(ctx, {
type: "polarArea",
data: chartData, // my data comes from an API but yours can come from whatever source you choose
options: {
elements: {
arc: {
angle: [90,90,50,130]
/* this is an example. You can build the array anywhere 
and then set the angles here. You can actually get
creative by not summing to 360. They can
start wrapping around on top of each other (> 360) or not
take up the full circle (< 360).
*/
}
}
}
);