我有一个简单的折线图,当两个或更多个点距离太近时,我会遇到问题。问题是:工具提示显示一个点,单击功能显示另一个点。
在此示例中,您可以看到,当我单击红线(值2)的第一点时,单击事件是黑线(值0)
示例: https://codepen.io/ataufo/pen/NexppY
var canvas = document.getElementById("lineChart");
var ctx = canvas.getContext('2d');
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Stock A",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red",
borderCapStyle: 'square',
pointBorderWidth: 0.1,
pointHoverRadius: 6,
pointHoverBorderWidth: 2,
pointRadius: 1,
data: [2, 59, 80, 81, 56],
spanGaps: false,
datalabels: {
enabled: true,
allowOverlap: true,
display: true,
listeners: {
click: function(context) {
alert(context.dataIndex + " Red line");
}
}
}
}, {
label: "Stock B",
fill: false,
lineTension: 0.1,
backgroundColor: "black",
borderColor: "black",
borderCapStyle: 'square',
pointBorderWidth: 0.1,
pointHoverRadius: 6,
pointHoverBorderWidth: 2,
pointRadius: 1,
data: [0, 20, 60, 95, 64],
spanGaps: false,
datalabels: {
enabled: true,
allowOverlap: true,
display: true,
listeners: {
click: function(context) {
alert(context.dataIndex + " Black Line");
}
}
}
}
]
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
showTooltips: false,
type: 'line',
data: data
});
有人能解决这个问题吗?
答案 0 :(得分:1)
您显式引用数据集public delegate void DoUIWorkHandler();
。您需要像这样传递数据集索引:
public delegate void DoUIWorkHandler(object sender, EventArgs args);
编辑: 完整的示例。
0
canvas.onclick = function(evt) {
var activePoints = myLineChart.getElementAtEvent(evt);
//console.log(activePoints);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
// change the following line...
//var value = chartData.datasets[0].data[idx];
// to this:
var value = chartData.datasets[activePoints[0]._chart.tooltip._active[0]._datasetIndex].data[idx];
var url = "Mês:" + label + " Valor: " + value;
alert(url);
}
};
var canvas = document.getElementById("lineChart");
var ctx = canvas.getContext('2d');
canvas.onclick = function(evt) {
var activePoints = myLineChart.getElementAtEvent(evt);
console.log(activePoints);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
//var value = chartData.datasets[0].data[idx];
var value = chartData.datasets[activePoints[0]._chart.tooltip._active[0]._datasetIndex].data[idx];
var url = "Mês:" + label + " Valor: " + value;
alert(url);
}
};
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Stock A",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red",
borderCapStyle: 'square',
pointBorderWidth: 0.1,
pointHoverRadius: 6,
pointHoverBorderWidth: 2,
pointRadius: 1,
data: [2, 59, 80, 81, 56],
spanGaps: false
}, {
label: "Stock B",
fill: false,
lineTension: 0.1,
backgroundColor: "black",
borderColor: "black",
borderCapStyle: 'square',
pointBorderWidth: 0.1,
pointHoverRadius: 6,
pointHoverBorderWidth: 2,
pointRadius: 1,
data: [0, 20, 60, 95, 64],
spanGaps: false
}
]
};
// Chart declaration:
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
enabled: true
}
}
});