Chart.js Plusieurs dataset

J'ai un problème avec Chart.js.

Je veux un une alerte de me montrer la valeur de l'ID de jeu dans le jeu de données lorsque je clique sur un point du graphique.

J'ai essayé d'utiliser getElementsAtEvent(evt);, mais il ne fonctionne pas comme je l'espérais.

Quelqu'un peut-il m'aider? Merci!

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> </script>
</head>
<body>
<canvas id="myChart" width="400" height="100"></canvas>
<script>
var ctx = document.getElementById("myChart");
var color = ["#ff6384", "#5959e6", "#2babab", "#8c4d15", "#8bc34a", "#607d8b", "#009688"];
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Linea A',
backgroundColor: "transparent",
borderColor: color[1],
pointBackgroundColor: color[1],
pointBorderColor: color[1],
pointHoverBackgroundColor: color[1],
pointHoverBorderColor: color[1],
data: [{
x: "2014-09-02",
y: 90,
id: '1A'
}, {
x: "2014-11-02",
y: 96,
id: '2A'
}, {
x: "2014-12-03",
y: 97,
id: '3A'
}]
},
{
label: 'Linea B',
backgroundColor: "transparent",
borderColor: color[2],
pointBackgroundColor: color[2],
pointBorderColor: color[2],
pointHoverBackgroundColor: color[2],
pointHoverBorderColor: color[2],
data: [{
x: "2014-09-01",
y: 96,
id: "1B"
}, {
x: "2014-10-04",
y: 95.8,
id: "2B"
}, {
x: "2014-11-06",
y: 99,
id: "3B"
}]
}
]
},
options: {
title: {
display: true,
text: 'Polveri',
fontSize: 18
},
legend: {
display: true,
position: "bottom"
},
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'MM/YY',
'second': 'MM/YY',
'minute': 'MM/YY',
'hour': 'MM/YY',
'day': 'MM/YY',
'week': 'MM/YY',
'month': 'MM/YY',
'quarter': 'MM/YY',
'year': 'MM/YY',
},
tooltipFormat: "DD/MM/YY"
}
}]
}
}
});
document.getElementById("myChart").onclick = function(evt) {
var activePoints = scatterChart.getElementsAtEvent(evt);
var firstPoint = activePoints[1];
console.log(firstPoint._datasetIndex);
console.log(firstPoint._index);
var label = scatterChart.data.labels[firstPoint._index];
console.log(scatterChart.data.datasets[0].data[0].id);
var value = scatterChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
if (firstPoint !== undefined)
alert(label + ": " + value);
};  
</script>
</body>

  • Avez-vous oublié d'ajouter Moment.js dans votre code ci-dessus?.. Il n'est pas de travail pour moi.
InformationsquelleAutor PietroR91 | 2017-03-29
  1. 0

    Vous devez changer votre label affectation de variable d',

    var label = scatterChart.data.labels[firstPoint._index];

    À,

    var label = scatterChart.data.datasets[firstPoint._index].label;

    Et vous pouvez aussi avoir besoin de changer votre alert déclaration en, 

    alert(label + ": " + value.x);

    Ici, c'est le travail de DÉMONSTRATION: https://jsfiddle.net/dt6c9jev/

    Espérons que cette aide!.

    • Merci pour votre réponse, mais ça ne marche pas comme je m'y attendais; Si je clique sur le deuxième Point violet (Ligne A), elle imprime: "la Linea B 04/10/14", et pas "Linea Un 02-11-14", comme il le fera :/
    • Vous avez besoin pour obtenir le activePoints de façon dynamique. Actuellement, il semble que vous êtes aller chercher une valeur codée en dur comme var firstPoint = activePoints[1];
    • Downvote?.. Veuillez indiquer la raison
    InformationsquelleAutor David R
  2. 0

    Vous devez utiliser le .getElementAtEvent() méthode de prototype au lieu de .getElementsAtEvent(). La différence étant le premier renvoie uniquement le seul point sur lequel vous avez cliqué, alors que l'autre renvoie tous les points de l'axe X, pour cela cliquez.

    Ici est un exemple.

    document.getElementById("canvas").onclick = function(evt) {
var activePoint = myLine.getElementAtEvent(event);
//make sure click was on an actual point
if (activePoint.length > 0) {
var clickedDatasetIndex = activePoint[0]._datasetIndex;
var clickedElementindex = activePoint[0]._index;
var label = myLine.data.labels[clickedElementindex];
var value = myLine.data.datasets[clickedDatasetIndex].data[clickedElementindex];     
alert("Clicked: " + label + " - " + value);
}
};

    Vous pouvez voir une démonstration à ce codepen.

    InformationsquelleAutor jordanwillis