ChartJs 2.0 Comment puis-je obtenir de l'information sur le point d'être cliqué sur?

Comment configurez-vous ChartJS version 2.0 en cliquant sur un point sur un graphique en radar fournir les données associées à ce point c'est à dire de l'étiquette, les données de la valeur, le nom du jeu de données. J'ai lu sur https://github.com/nnnick/Chart.js/releases que la version 2.0 offre:

Nouvel événement crochets comme onHover et onClick faire le travail dur pour vous. Ils vous passer les bons trucs sans même avoir à le localiser via un événement

Quelqu'un pourrait-il svp me montrer ce que je dois faire j'ai lu la documentation et essayé attachés aux différentes cliquez et événement onClick qui les différents objets de soutien, mais ne peut pas travailler sur la façon d'obtenir les données associées.

Exemple de code (simplifié) dont je suis l'aide est:

<pre>

    <script type="text/javascript">
      var config = {
      type: 'radar',
      data: {
      labels: ["Total IOPs","Total Num. Execs","Total Worker Time Seconds","Total  Physical Reads","Total Logical Writes","Total Logical Reads","Total Elapsed Time (s)","Longest Running Time (s)","Avg. IOPs per call","Avg. Elapsed Time (ms)","Avg. Num. Execs per Sproc","Avg IOPS per sproc"],
     datasets:
    [
     {
      label: "DB1",
      fillColor: "rgba(212, 212, 106, 0.2)",
      strokeColor: "rgba(212, 212, 106, 1)",
      pointColor: "rgba(212, 212, 106, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(212, 212, 106, 1)",
      data:[100,100,33.1715210355987,100,100,100,11.8161563835901,4.29405702507729,100,5.4590570719603,39.672945113066,100]
     },
     {
      label: "DB2",
      fillColor: "rgba(165, 198, 99, 0.2)",
      strokeColor: "rgba(165, 198, 99, 1)",
      pointColor: "rgba(165, 198, 99, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(165, 198, 99, 1)",
      data: [41.7446840202287,46.5744067420714,100,79.3727756793507,20.5131426518999,41.747519880759,100,100,89.6330850100954,100,100,16.5613115389214]
     }
     ]
     }
    };

     $(function () {
            var myRadar = new Chart(document.getElementById("myChart"), config);
         //how do I attach to the onclick event which gives me the point info being clicked on in chartjs 2.0?
        });

</script>

<div class="radarChart">
     <canvas id="myChart" width="700" height="700"></canvas>
</div>

Merci beaucoup à l'avance.

OriginalL'auteur SqlDataMiner | 2015-09-15

chart.js

11

Vous devriez être en mesure d'utiliser le getElementsAtEvent méthode, comme
```
document.getElementById("myChart").onclick = function(evt){
    var activePoints = myRadar.getElementsAtEvent(evt);
    //use _datasetIndex and _index from each element of the activePoints array
};
```
Violon http://jsfiddle.net/uwaszvk7/

Merci, vraiment plus utile.
J'ai été - comme un fou - la recherche d'une réponse à ce dilemme. Et getElementsAtEvent a fait le travail. chart.js la documentation a besoin d'un sérieux de mise à jour.
Belle réponse! Même avis que Alberto
Cela renvoie toujours le jeu de données 0, comment puis-je obtenir le vrai dataset cliqué. Parce que si j'ai 4 jeux de données, je reçois toujours le Dataset 0 indice sur lequel vous avez cliqué. Merci
le "activePoints" var est en fait le 2ème arg dans le onclick = function(evt,activePoints) et à l'ensemble du contenu de votre jeu de données. Il n'a aucun rapport avec ce que vous avez cliqué.

OriginalL'auteur potatopeelings
4

En outre, vous pouvez utiliser var activePoints = chartObj.getElementsAtXAxis(evt); pour obtenir la plus proche de l'élément actif basé uniquement sur l'axe des abscisses. (Super utile quand vous avez de très petites valeurs)

OriginalL'auteur Rowan Christmas

Une autre façon d'atteindre cet objectif dans ChartJS 2.0 est d'utiliser le lastActive propriété du graphique en radar.

var myRadar = new Chart(document.getElementById("myChart"), config);
Chart.defaults.global.responsive = true;
Chart.defaults.global.hover.mode = 'single';
document.getElementById("myChart").onclick = function (evt) {
var activePoint = myRadar.lastActive[0];
if (activePoint !== undefined) {
        var datasetIndex = activePoint._datasetIndex;
                var index = activePoint._index;
                var datasetName = config.data.datasets[datasetIndex].label;
                var title = config.data.labels[index];
                var dataValue = config.data.datasets[datasetIndex].data[index];
                alert("Dataset Name: [" + datasetName + "] title: [" + title + "] value: [" + dataValue + "]");
            }
        };

C'est effectivement la façon dont cela a fonctionné pour moi. Bien que je ne suis pas en utilisant datasetName et aucune référence à datasetIndex (j'utilise à la place de 0). Mais il fonctionne vraiment bien.

OriginalL'auteur SqlDataMiner

Appel getElementsAtEvent(event) sur votre Graphique exemple du passage d'un
argument d'un événement, ou jQuery événement, sera de retour le point d'éléments
qui sont à la même position de cet événement.

...
var canvas = document.getElementById("myChart");
var myRadar = new Chart(canvas, config);
canvas.onclick = function(evt) {

    //=> activePoints is an array of points on the canvas that are at the same position as the click event.
    var activePoint = myRadar.getElementsAtEvent(evt)[0];

    if (activePoint !== undefined) {
        var dataset = myRadar.data.datasets[activePoint._datasetIndex];
        var title = myRadar.data.labels[activePoint._index];
        var oldValue = dataset.data[activePoint._index];
        var newValue = oldValue + 10;
        dataset.data[activePoint._index] = newValue;
    }

    //Calling update now animates element from oldValue to newValue.
    myRadar.update();

    console.log("Dataset: '"+ dataset.label + "' Element '" + title + "' Value updated from: " + oldValue + " to: " + newValue);
};

OriginalL'auteur Andrew

Vous devez vous connecter pour publier un commentaire.