我希望能够在图表的一个极坐标区域图上独立地显示百分比和数值。例如,我希望将市场份额百分比设置为饼图,但在显示每个细分市场利润的圆圈中表示数值,圆圈的高度与数值相关,而不是百分比。
我知道传统的极坐标图只会在图表上同时绘制数值及其百分比。我想将两者分开,这样我就可以决定百分比,然后将数值设定为更有意义的值。
这是可能的吗?这里有一个codepen的链接,它展示了其他人对chartjs极坐标图的实现。我曾经玩过它,但到目前为止还没有任何进展。
Codepen polar chart example
下面是代码:
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]
}]
}
但我看不出有什么办法可以输入两批数据,一批用于百分比,另一批用于值。
在here中找到的api只引用了Angular ,而不是设置Angular 的方式。api中是否有什么东西(我可能遗漏了)可以帮助我绕过这个问题?
1条答案
按热度按时间bjg7j2ky1#
我知道这是个老问题,但如果我理解正确的话,这是完全可行的。我在任何地方都找不到解决方案,不得不自己设计一个。默认的极坐标图行为是让每个线段都有相同的Angular 。但在选项中为每个切片设置不同的Angular 很容易。我想这样做,这样线段的半径就可以代表它的百分比。“而切片的Angular 表示该目标对整体的贡献大小(将产品的销售预算作为半径,将产品的销售额对公司总销售预算的贡献量作为Angular )。
在设置图表时,关键是options.elements.arc属性。可以传入一个值数组,并调整每个线段的Angular 。只要总数加起来是360,极坐标图中就会有一个完整的圆: