web-dev-qa-db-fra.com

Chart.js: événements liés aux graphiques à barres

Je viens juste de commencer à travailler avec Chart.js et je commence à être très frustré très rapidement. Mon graphique à barres empilées fonctionne, mais je ne parviens pas à utiliser le clic "événements".

J'ai trouvé un commentaire sur GitHub par nnnick de Chart.js indiquant d'utiliser la fonction getBarsAtEvent, même si cette fonction ne peut pas être trouvée dans la documentation de Chart.js tout (allez-y, faites une recherche pour ça). La documentation mentionne bien la fonction getElementsAtEvent de la référence chart, mais cela s’applique uniquement aux graphiques en courbes.

J'ai défini un écouteur d'événement (de la bonne façon) sur mon élément de canevas:

canv.addEventListener('click', handleClick, false);

... mais dans ma fonction handleClick, chart.getBarsAtEvent n'est pas défini!

Désormais, dans le document Chart.js, il existe une déclaration indiquant une manière différente d’enregistrer l’événement click pour le graphique à barres. C'est très différent du commentaire de nnnick sur GitHub d'il y a 2 ans.

Dans Global Chart Defaults vous pouvez définir une fonction onClick pour votre graphique. J'ai ajouté une fonction onClick à la configuration de ma carte et cela n'a rien fait ...

Alors, comment diable puis-je obtenir le rappel par clic au travail pour mon graphique à barres?!

Toute aide serait grandement appréciée. Merci!

P.S .: Je n'utilise pas la construction principale de GitHub. J'ai essayé, mais je ne cessais de crier que require is undefined et je n'étais pas prêt à inclure CommonJS uniquement pour pouvoir utiliser cette bibliothèque de diagrammes. Je préférerais écrire mes propres graphiques. Au lieu de cela, j'ai téléchargé et j'utilise la version Standard Build que j'ai téléchargée directement à partir du lien en haut de la page documentation .

EXEMPLE: Voici un exemple de la configuration que j'utilise:

var chart_config = {
    type: 'bar',
    data: {
        labels: ['One', 'Two', 'Three'],
        datasets: [
            {
                label: 'Dataset 1',
                backgroundColor: '#848484',
                data: [4, 2, 6]
            },
            {
                label: 'Dataset 2',
                backgroundColor: '#848484',
                data: [1, 6, 3]
            },
            {
                label: 'Dataset 3',
                backgroundColor: '#848484',
                data: [7, 5, 2]
            }
        ]
    },
    options: {
        title: {
            display: false,
            text: 'Stacked Bars'
        },
        tooltips: {
            mode: 'label'
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            xAxes: [
                {
                    stacked: true
                }
            ],
            yAxes: [
                {
                    stacked: true
                }
            ]
        },
        onClick: handleClick
    }
};
javascriptchart.js
20
WebWanderer

J'ai réussi à trouver la réponse à ma question en consultant le code source Chart.js .

Fourni à la ligne 3727 de Chart.js, Génération standard, correspond à la méthode .getElementAtEvent. Cette méthode me renvoie "l'élément de graphique" sur lequel vous avez cliqué. Vous disposez ici de suffisamment de données pour déterminer les données à afficher dans une vue détaillée du jeu de données sur lequel vous avez cliqué.

Sur le premier index du tableau renvoyé par chart.getElementAtEvent, il y a une valeur _datasetIndex. Cette valeur affiche l'index de l'ensemble de données sur lequel l'utilisateur a cliqué.

Je crois que la barre sur laquelle vous avez cliqué est notée par la valeur _index. Dans mon exemple de ma question, _index indiquerait One dans chart_config.data.labels.

Ma fonction handleClick ressemble maintenant à ceci:

function handleClick(evt)
{
    var activeElement = chart.getElementAtEvent(evt);

..where chart est la référence du graphique créé par chart.js lors de l'exécution de:

chart = new Chart(canv, chart_config);

Le jeu de données spécifique sélectionné par le clic se présente donc comme suit:

chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];

Et voila. J'ai maintenant un point de données à partir duquel je peux créer une requête pour afficher les données de la barre sur laquelle vous avez cliqué.

38
WebWanderer

Bonjour c’est l’événement click sous options qui obtient les valeurs des axes x et y

onClick: function(c,i) {
    e = i[0];
    console.log(e._index)
    var x_value = this.data.labels[e._index];
    var y_value = this.data.datasets[0].data[e._index];
    console.log(x_value);
    console.log(y_value);
}
24
Vaimeo

J'ai trouvé cette solution sur https://github.com/valor-software/ng2-charts/issues/489

public chartClicked(e: any): void {
  if (e.active.length > 0) {
  const chart = e.active[0]._chart;
  const activePoints = chart.getElementAtEvent(e.event);
  if ( activePoints.length > 0) {
   // get the internal index of slice in pie chart
   const clickedElementIndex = activePoints[0]._index;
   const label = chart.data.labels[clickedElementIndex];
   // get value by index
   const value = chart.data.datasets[0].data[clickedElementIndex];
   console.log(clickedElementIndex, label, value)
  }
 }
}
6
Asif Karim Bherani

Bien joué! Cela semble cependant renvoyer la valeur des données cartographiées, qui dans de nombreux cas pourraient éventuellement apparaître plusieurs fois, ce qui rendait flou le choix du clic.

Cela renverra l'étiquette de données réelle de la barre sur laquelle l'utilisateur a cliqué. J'ai trouvé cela plus utile lors de l'exploration d'une catégorie.

chart_config.data.labels[activeElement[0]._index]
3
Matt R O'Connor

J'ai été capable de faire ce travail d'une autre manière ..__ Peut ne pas être pris en charge, mais parfois, je trouve que ni l'étiquette ni la valeur ne suffisent pour me fournir les informations nécessaires pour alimenter un accès au détail.

J'ai donc ajouté un ensemble d'attributs personnalisés aux données:

var ctx = document.getElementById("cnvMyChart").getContext("2d");
if(theChart != null) {theChart.destroy();}
theChart = new Chart(ctx, {
type: typ,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datakeys: ["thefirstone","thesecondone","thethirdone","thefourthone","thefifthone","thesixthone"],
datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3],

...etc

Puis, quand j'ai besoin d'insérer la clé d'extraction dans un autre appel ajax, j'ai pu l'obtenir avec ceci:

var theDrillThroughKey = theChart.config.data.datakeys[activePoints[0]._index];

Donc, je ne suis vraiment pas sûr qu'il soit approprié d'ajouter des éléments personnalisés aux données du graphique, mais cela fonctionne jusqu'à présent dans Chrome, IE et Firefox. Je devais être capable de mettre plus d'informations dans l'extraction que ce que je voulais vraiment afficher.

Exemple de la chose complète: https://wa.rrdsb.com/chartExamples

Pensées?

1
Chris Denby

Disons que vous avez déclaré un graphique en utilisant une méthode comme celle-ci:

  window.myBar = new Chart({chart_name}, {
       type: xxx,
       data: xxx,
       events: ["click"],
       options: {
           ...
       }
  });

Un bon moyen de déclarer des événements onclick consiste à écouter le clic sur la toile, comme suit:

({chart_name}.canvas).onclick = function(evt) {
     var activePoints = myBar.getElementsAtEvent(evt);
     // let's say you wanted to perform different actions based on label selected
     if (activePoints[0]._model.label == "label you are looking for") { ... }
}
0
Marquistador