使用chart.js的帶有Json數據的動態餅圖

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

您可以綁定到圖表的click事件，獲取餅圖的活動段，並基於此更改圖表顯示的信息。

下面的示例在單擊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/