Динамический круговой диаграммы с данными Json с использованием chart.js

Question

Я создаю piechart, используя 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/