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

Question

I am creating a piechart using chart.js. I have a json data like

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

I want to use the Subcontractor value as the pie chart label and the Deficiency value as the chart value .

How to pass this dynamically into the pie chart in chart.js?

Also, when I click on a particular slice I want to reload/refresh the pie chart with different data.

Answer 1

You could bind to the click event of the chart, get the active segment of the pie chart and based on that change the information displayed by the chart.

The example below resets the chart when you click on the Red segment, and adds to the charts all entries of an arbitrary dataset 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])
            }
        }
    });
});

Full example here: http://jsfiddle.net/bsxg7jt7/