Удалить фрагмент onClick событий на диаграммах пирога в Chart.js

У меня есть вопрос о пиротехнических диаграммах на Chart.js.Удалить фрагмент onClick событий на диаграммах пирога в Chart.js

Что было бы лучшим способом удалить кусочек при нажатии на него? Я знаю, что метод getSegmentsAtEvent() может использоваться для чтения свойств среза. Можно узнать, какой срез я нажимаю на объект slices, пока не будет найдено совпадение. Есть ли более простой способ достичь этого?

ТКС

источник

2014-12-23 fcaserio

Это может быть достигнуто с помощью функций: getSegmentsAtEvent(event) и removeData(index)Chart.js API

С getSegmentsAtEvent вы можете восстановить сегмент, который был щелкнули.

Следующим шагом является поиск индекса среза на графике. Чтобы выполнить поиск, вы можете выполнить итерацию по всем текущим сегментам диаграммы и вызвать removeData, когда он будет найден. (Я думаю, что нет никакого способа, чтобы непосредственно знать индекс)

var segments = myChart.segments; 
for (var index = 0; index < segments.length; index++) { 
    if (activeLabel == segments[index].label) { 
     myChart.removeData(index); 
    } 
}

Полный демо:

<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script> 
     <script type="text/javascript" src="Chart.js"></script> 
     <script type="text/javascript"> 
      var data = [ 
       { 
        value: 300, 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: "Red" 
       }, 
       { 
        value: 50, 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: "Green" 
       }, 
       { 
        value: 100, 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: "Yellow" 
       } 
      ]; 

      $(document).ready( 
       function() { 
        var ctx = document.getElementById("myChart").getContext("2d"); 
        var myChart = new Chart(ctx).Pie(data); 

        $("#myChart").click( 
         function(evt){ 
          var activePoints = myChart.getSegmentsAtEvent(evt); 
          var activeLabel = activePoints[0].label; 
          var segments = myChart.segments; 
          for (var index = 0; index < segments.length; index++) { 
           if (activeLabel == segments[index].label) { 
            myChart.removeData(index); 
           } 
          } 
         } 
        ); 
       } 
      ); 
     </script> 
    </head> 
    <body> 
     <canvas id="myChart" width="400" height="400"></canvas> 
    </body> 
</html>

источник

2014-12-23 15:29:30

Удалить фрагмент onClick событий на диаграммах пирога в Chart.js

ответ

Смежные вопросы