ChartJS 在ChartJ中,使用极坐标面积图来分别显示百分比和数值

z9ju0rcb  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(206)

我希望能够在图表的一个极坐标区域图上独立地显示百分比和数值。例如,我希望将市场份额百分比设置为饼图,但在显示每个细分市场利润的圆圈中表示数值,圆圈的高度与数值相关,而不是百分比。
我知道传统的极坐标图只会在图表上同时绘制数值及其百分比。我想将两者分开,这样我就可以决定百分比,然后将数值设定为更有意义的值。
这是可能的吗?这里有一个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中是否有什么东西(我可能遗漏了)可以帮助我绕过这个问题?

bjg7j2ky

bjg7j2ky1#

我知道这是个老问题,但如果我理解正确的话,这是完全可行的。我在任何地方都找不到解决方案,不得不自己设计一个。默认的极坐标图行为是让每个线段都有相同的Angular 。但在选项中为每个切片设置不同的Angular 很容易。我想这样做,这样线段的半径就可以代表它的百分比。“而切片的Angular 表示该目标对整体的贡献大小(将产品的销售预算作为半径,将产品的销售额对公司总销售预算的贡献量作为Angular )。
在设置图表时,关键是options.elements.arc属性。可以传入一个值数组,并调整每个线段的Angular 。只要总数加起来是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).
                */
            }
        }
    }
);

相关问题