web-dev-qa-db-fra.com

Comment ajouter un événement de clic à mon graphique linéaire à l'aide de Chart.js

J'essaie d'ajouter un événement de clic à mon graphique linéaire en utilisant Chart.js . J'ai déjà mes info-bulles activées pour afficher les informations de mes graphiques en courbes, mais je voudrais également ajouter une méthode au clic qui me permettra de savoir où l'utilisateur a cliqué sur l'axe des x. Pour l'instant, je voudrais juste qu'une alerte apparaisse, me donnant la valeur sur l'axe x où l'utilisateur a cliqué.

RECHERCHE:

J'ai parcouru le documentation de Chart.js et je suis tombé sur cette méthode: .getPointsAtEvent (event)

L'appel de getPointsAtEvent (événement) sur votre instance Chart en passant un argument d'un événement, ou événement jQuery, renverra les éléments de point qui se trouvent à la même position de cet événement.

canvas.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event. };

Je n'arrive pas à comprendre comment utiliser ou où placer la fonction dans mon code. Si quelqu'un pouvait m'aider à trouver où je pourrais l'ajouter à mon code, ce serait grandement apprécié!

MON CODE: (en javascript)

  //NOTE: the div 'roomForChart' has been already declared as <div id="roomForChart"></div>


 //creating html code inside of javascript to display the canvas used for the graph
 htmlForGraph = "<canvas id='myChart' width ='500' height='400'>";
 document.getElementById('roomForChart').innerHTML += htmlForGraph;

 //NOW TO CREATE DATA

   //the data for my line chart
    var data = {
         labels: ["Aug 1", "Aug 2", "Aug 3","Aug 4","Aug 5"], //the x axis
          datasets: [
            {   //my red line
                label: "Usage Plan",
                fillColor: "rgba(255,255,255,0.2)", //adds the color below the line
                strokeColor: "rgba(224,0,0,1)",//creates the line
                pointColor: "rgba(244,0,0,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [1024, 1024, 1024, 1024, 1024]
           },

       {    //my green line
            label: "Overall Usage",
            fillColor: "rgba(48,197,83,0.2)",
            strokeColor: "rgba(48,197,83,1)",
            pointColor: "rgba(48,197,83,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(48,197,83,1)",
            data: [15, 25, 45, 45, 1500]
       },
        {  //my blue line
            label: "Daily Usage",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [15, 10, 20, 0, 5]
       }

     ] //ending the datasets
     }; //ending data


    //creating a variable for my chart
    var ctx = document.getElementById("myChart").getContext("2d");




//code to create a maximum y value on the chart
var maxUsage = 1024;
var maxSteps = 5;
var myLineChart = new Chart(ctx).Line(data, {
    pointDot: false,
    scaleOverride: true,
    scaleSteps: maxSteps,
    scaleStepWidth: Math.ceil(maxUsage / maxSteps),
    scaleStartValue: 0

});

 //what I have tried but it doesn't show an alert message
ctx.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};

Pour ceux d'entre vous qui ont du mal à visualiser le tableau, vous allez:

enter image description here

J'espère avoir fourni suffisamment d'informations pour obtenir de l'aide. Veuillez me faire savoir si j'ai besoin de m'expliquer. Merci d'avance!!! :)

javascriptchartsonclicklinechartchart.js
13
MadsterMaddness

Changer cette ligne

document.getElementById('roomForChart').innerHTML += htmlForGraph;

pour ça

holder = document.getElementById('roomForChart');
holder.innerHTML += htmlForGraph;

et en plus vous aurez votre extrait, un peu modifié

holder.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};

Ajoutez console.log(activePoints); dans le gestionnaire onclick pour voir le contenu de la variable activePoints. Comme je peux le voir, il y a trois objets. Par exemple, ce sont des valeurs pour activePoints[0]

datasetLabel: "Usage Plan"
fillColor: "rgba(244,0,0,1)"
highlightFill: "#fff"
highlightStroke: "rgba(220,220,220,1)"
label: "Aug 4"
strokeColor: "#fff"
value: 1024
x: 371
y: 12.356097560975627

Et ils peuvent être consultés comme suit

activePoints[0].label
activePoints[0].x
activePoints[0].y
activePoints[0].value

Il sera bon de vérifier d'abord si la propriété est undefined, car il n'y a pas de données derrière chaque événement de clic.

7
hex494D49

si vous utilisez la nouvelle version de Chart Js, utilisez ceci:

canvas.onclick = function(evt){
   var activePoints = myLineChart.getElementsAtEvent(evt);
};
6
Oswaldo Rodriguez Gonzalez

Je n'ai pas réussi à faire fonctionner la méthode onclick.

Mais j'ai finalement réussi à l'exécuter en utilisant la méthode click:

$("#canvas_id").click(function(e) {
   var activeBars = myBarChart.getBarsAtEvent(e); 
   console.log(activeBars[0]);
});

Remarque: cet exemple concerne le graphique à barres - d'autres graphiques ont des méthodes légèrement différentes pour récupérer les points (voir la documentation).

6
magicrebirth

Les réponses fournies à ce jour sont proches de la ou des solutions correctes, mais incomplètes. Vous devez utiliser getElementsAtEvent () pour obtenir les éléments corrects, mais cela vous donne une collection d'éléments qui se trouvent sur le x-index cliqué. Dans le cas où vous utilisez plusieurs ensembles de données, il peut s'agir de plusieurs valeurs, une pour chaque ensemble de données.

Pour déterminer l'ensemble de données correct à partir duquel extraire, appelez la méthode getDatasetAtEvent (). Cela renverra une liste des éléments contenant l'élément de jeu de données cliqué. Choisissez l'ID de l'ensemble de données de l'un d'eux, ils sont tous le même ID.

Mettez les deux ensemble et vous avez l'appel dont vous avez besoin pour comprendre les données contenues dans l'élément cliqué. Passer plus que juste et les valeurs x et y lorsque vous lancez votre ensemble de données vous permettra de faire toutes sortes de trucs soignés avec cet événement. (Par exemple, déclenchez une fenêtre contextuelle contenant des informations plus détaillées sur l'événement)

Il pourrait y avoir un moyen plus succinct d'obtenir ces données, mais je ne l'ai pas trouvé en train de contourner les documents graphiques et les tickets. Peut-être qu'ils l'ajouteront dans une prochaine version.

// chart_name is whatever your chart object is named. here I am using a
// jquery selector to attach the click event.
$('#' + chart_name).click(function (e)
{
    var activePoints = myChart.getElementsAtEvent(event);
    var activeDataSet = myChart.getDatasetAtEvent(event);

    if (activePoints.length > 0)
    {
         var clickedDatasetIndex = activeDataSet[0]._datasetIndex;
         var clickedElementIndex = activePoints[0]._index;
         var value = myChart.data.datasets[clickedDatasetIndex].data[clickedElementIndex];
    }
    // todo: add code to do something with value.
});
2
Roger Hill