使用 chart.js 的带有 Json 数据的动态饼图答案

【问题标题】：Dynamic Pie Chart With Json Data using chart.js使用 chart.js 的带有 Json 数据的动态饼图
【发布时间】：2015-04-16 18:37:13
【问题描述】：

我正在使用 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 值用作饼图标签，将Deficiency 值用作图表值。

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

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

【问题讨论】：

标签： javascript jquery json 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/

【讨论】：