Question

我正在使用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中的饼图？

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

Answer 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/

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

1 个答案: