我在使用Chart.js时遇到了问题。
我想在图表上点击某个点时弹出一个警告框,告诉我该数据集中设置的ID值。
我尝试使用getElementsAtEvent(evt);
,但它并没有像我预期的那样工作。
有人能帮帮我吗?谢谢!
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 src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js">
</script>
<canvas id="myChart" width="400" height="100"></canvas>
Moment.js
了?.. 它对我来说不起作用。 - David R