问题描述
我有Chart.js的问题。
I have a problem with Chart.js.
当我点击图表中的某个点时，我想要一个警告显示数据集中设置的ID值。
I want an an alert show me the ID value set in the dataset when I click on a point in the chart.
我试过使用 getElementsAtEvent（evt）; ，但它没有按照我的预期工作。
I have tried using getElementsAtEvent(evt);, but it doesn't work as I expected.
有人能帮帮我吗？谢谢！
Can somebody help me? Thanks!
<!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>
推荐答案
您需要使用 .getElementAtEvent（） prototype方法而不是 .getElementsAtEvent（）。差异是第一个只返回你点击的单个点，而另一个返回该点击的X轴的所有点。
You need to use the .getElementAtEvent() prototype method instead of .getElementsAtEvent(). The difference being the first only returns the single point that you clicked whereas the other returns all points at the X axis for that click.
这是一个例子。
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);
}
};
您可以在此处看到演示。
You can see a demonstration at this codepen.
这篇关于Chart.js多个数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！