web-dev-qa-db-fra.com

Comment explorer les graphiques avec ChartJS?

J'ai été très surpris de n'avoir trouvé pratiquement aucune information sur ce sujet.

J'ai un graphique à secteurs ChartJS que je souhaite explorer après avoir cliqué sur une tranche du graphique.

Comment feriez-vous cela? Recommanderiez-vous d'utiliser Google Maps ou toute autre bibliothèque à la place?

Je vous remercie

javascriptjquerychart.jspie-chartdrilldown
7
AlonBA

J'ai résolu mon problème en utilisant cette même réponse:

Cliquez sur les événements sur les graphiques à secteurs dans Chart.js

Le code:

    $(document).ready(function() {
      var canvas = document.getElementById("myChart");
      var ctx = canvas.getContext("2d");
      var myNewChart = new Chart(ctx, {
         type: 'pie',
         data: data
      });

      canvas.onclick = function(evt) {
      var activePoints = myNewChart.getElementsAtEvent(evt);
      if (activePoints[0]) {
         var chartData = activePoints[0]['_chart'].config.data;
         var idx = activePoints[0]['_index'];

         var label = chartData.labels[idx];
         var value = chartData.datasets[0].data[idx];
         var color = chartData.datasets[0].backgroundColor[idx]; //Or any other data you wish to take from the clicked slice

         alert(label + ' ' + value + ' ' + color); //Or any other function you want to execute. I sent the data to the server, and used the response i got from the server to create a new chart in a Bootstrap modal.
       }
     };
  });

Cela fonctionne parfaitement. Juste au lieu d'alerter les informations, je les envoie au serveur en utilisant AJAX et en affichant un nouveau graphique dans un modal bootstrap.

4
AlonBA