有谁知道在单击 Chart.js 图形上的点时是否可以触发 javascript 事件？
如果是这样，如何？
更新：这是我当前的图表初始化脚本，基于反馈：
function RenderBasicAnalyticsChart(targetSelector, usersCreated, usersAuthenticated, contentDownloaded)
{
var ctx = $(targetSelector);
var chartObject = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
type: 'line',
label: 'Users created',
borderColor: 'rgba(0,169,224,1.0)',
pointBackgroundColor: 'rgba(0,169,224,1.0)',
backgroundColor: 'rgba(0,169,224,0.4)',
data: usersCreated
},
{
type: 'line',
label: 'Users signed in',
borderColor: 'rgba(120,170,0,1.0)',
pointBackgroundColor: 'rgba(120,170,0,1.0)',
backgroundColor: 'rgba(120,170,0,0.4)',
data: usersAuthenticated
},
{
type: 'line',
label: 'Assets downloaded',
borderColor: 'rgba(255,106,19,1.0)',
pointBackgroundColor: 'rgba(255,106,19,1.0)',
backgroundColor: 'rgba(255,106,19,0.4)',
data: contentDownloaded
}
]
},
options: {
defaultFontFamily: 'Open Sans',
responsiveAnimationDuration: 100,
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}]
}
}
});
$(targetSelector).click(function (e) {
var activePoints = chartObject.getElementsAtEvent(event);
if (activePoints.length > 0) {
var clickedDatasetIndex = activePoints[0]._datasetIndex;
var clickedElementIndex = activePoints[0]._index;
var value = chartObject.data.datasets[clickedDatasetIndex].data[clickedElementIndex];
console.log(clickedDatasetIndex + ' - ' + value['x']);
}
});
}
我现在遇到的问题是我的clickedDatasetIndex总是返回为 0，无论我单击哪一行。
是的，你肯定可以！只需使用.getDatasetAtEvent(e)或.getElementsAtEvent(e)原型方法（取决于您的需要）。这里有更多关于他们做什么的细节。
查找事件点下的元素，然后返回同一数据索引处的所有元素。这在内部用于“标签”模式突出显示。
在传递事件或 jQuery 事件的参数的 Chart 实例上调用 getElementsAtEvent(event) 将返回位于该事件相同位置的点元素。
这是一个示例，说明如何在有 1 个以上的数据集时获取被单击的点。假设我的画布有一个 idcanvas并且我的图表实例被称为myLine。
document.getElementById("canvas").onclick = function(evt){
var activePoints = myLine.getElementAtEvent(event);
// make sure click was on an actual point
if (activePoints.length > 0) {
var clickedDatasetIndex = activePoints[0]._datasetIndex;
var clickedElementindex = activePoints[0]._index;
var label = myLine.data.labels[clickedElementindex];
var value = myLine.data.datasets[clickedDatasetIndex].data[clickedElementindex];
alert("Clicked: " + label + " - " + value);
}
};
您还可以尝试使用此codepen 示例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句