Select 如何在chart.js中注册绘图或标记单击事件
现在我正在使用Chart.js库。 并希望注册click事件处理程序以运行自定义代码。 我想在单击标签或绘图时运行自定义代码 单击它们时,如何获取有关它们的信息 ex)当我点击“2016-11-16”标签时,如何获取“2016-11-16”字符串值 ex)当我单击绘图(2016-11-19,4)时,如何获取绘图信息?onCLick事件 如果事件类型为“mouseup”或“click”,则调用。请来 并传递了一个活动元素数组 当您单击point时,它将通过传递两个参数mouseEvent和一个图表数组来调用函数。从图表数组中,可以提取标签Select 如何在chart.js中注册绘图或标记单击事件,select,plot,label,chart.js,Select,Plot,Label,Chart.js,现在我正在使用Chart.js库。 并希望注册click事件处理程序以运行自定义代码。 我想在单击标签或绘图时运行自定义代码 单击它们时,如何获取有关它们的信息 ex)当我点击“2016-11-16”标签时,如何获取“2016-11-16”字符串值 ex)当我单击绘图(2016-11-19,4)时,如何获取绘图信息?onCLick事件 如果事件类型为“mouseup”或“click”,则调用。请来 并传递了一个活动元素数组 当您单击point时,它将通过传递两个参数mouseEvent和一个图
options: {
onClick : function(mouseEvent,chart){
}
}
[示例代码]
var ctx = document.getElementById("myChart1");
var label = ["January", "February", "March", "April", "May", "June", "July"];
var data = [65, 59, 80, 81, 56, 55, 40]
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: label,
datasets: [{
label: "Logined users num",
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: data
}]
},
options: {
onClick : function(mouseEvent,chart){
var myLabel = label[chart[0]._index];
var y = this.data.datasets[chart[0]._datasetIndex].data[chart[0]._index];
}
}
});
备注:-仅当您单击图表或非标签点时,此功能才起作用。谢谢,但不起作用,\u模型没有标签属性。我添加了更多代码,请帮助me@WhiteSnow请查找更新的代码。当用户点击任意一点时,它会给你绘图。如果用户点击X轴标签会发生什么情况,我们现在可以打印标签了吗?
var ctx = document.getElementById("myChart1");
var label = ["January", "February", "March", "April", "May", "June", "July"];
var data = [65, 59, 80, 81, 56, 55, 40]
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: label,
datasets: [{
label: "Logined users num",
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: data
}]
},
options: {
onClick : function(mouseEvent,chart){
var myLabel = label[chart[0]._index];
var y = this.data.datasets[chart[0]._datasetIndex].data[chart[0]._index];
}
}
});