使用chart.js的Json数据的动态饼图-Java 学习之路

我正在使用chart.js创建一个饼图 . 我有像json这样的数据

[
     {
       "Subcontractor": "C1",
       "Deficiency": 67
     },
     {
       "Subcontractor": "C2",
       "Deficiency": 25
     },
     {
      "Subcontractor": "C3",
      "Deficiency": 12
     }, 
     {
      "Subcontractor": "C5",
      "Deficiency": 7
     },
     {
      "Subcontractor": "C4",
      "Deficiency": 5
     },
     {
      "Subcontractor": "C6",
      "Deficiency": 1
     }
   ]

我想将 Subcontractor 值用作饼图 label ，将 Deficiency 值用作图表 value .

如何将其动态传递到chart.js中的饼图？

此外，当我单击特定切片时，我想用不同的数据重新加载/刷新饼图 .

1 回答

您可以绑定到图表的单击事件，获取饼图的活动段，并根据该更改显示图表显示的信息 .

单击 Red 段时，下面的示例将重置图表，并将任意数据集的所有条目添加到图表中 data2

$("#myChart ").click(  
    function (evt) {
        var activePoints = myChart.getSegmentsAtEvent(evt);
        var activeLabel = activePoints[0].label;

        if (activeLabel == "Red") {
            while (myChart.segments.length > 0) {
                myChart.removeData()
            }
            for (i = 0; i < data2.length; i++) {
                myChart.addData(data2[i])
            }
        }
    });
});

这里有完整的例子：http://jsfiddle.net/bsxg7jt7/

回复于 2024-05-09T11:35:38+08:00

使用chart.js的Json数据的动态饼图

1 回答

相关问题