Функция щелчка Chartjs Overlap не работает
У меня простая линейная диаграмма, и у меня проблема, когда две или более точки находятся слишком близко. Проблема: во всплывающей подсказке отображается одна точка, а функция щелчка - для другой точки.
В этом примере вы можете видеть, что когда я нажимаю на первую точку красной линии (значение 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
});
Есть ли у кого-нибудь идея решить это?
Ответы 1
Вы явно ссылаетесь на набор данных 0. Вам нужно передать индекс набора данных следующим образом:
canvas.onclick = function(evt) {
var activePoints = myLineChart.getElementAtEvent(evt);
//console.info(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.info(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
}
}
});body{
background-color: #666;
}
#lineChart{
background-color: wheat;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class = "container">
<br />
<div class = "row">
<div class = "col-md-1"></div>
<div class = "col-md-10">
<!-- Chart.js Canvas Tag -->
<canvas id = "lineChart"></canvas>
</div>
<div class = "col-md-1"></div>
</div>
</div>Я вижу, но вы можете щелкнуть между черными и красными точками и увидеть. Я нажимаю на черную точку (январь: 0), и в предупреждении отображается красная точка (январь: 2). Выбранное значение не синхронизируется с отображением всплывающей подсказки.
Я попытался использовать для этого плагин datalabels, но у меня возникла та же проблема. Исходный код для этого есть в моем исходном посте. Этот пример кода был еще одним шансом на решение той же проблемы.
Проблема заключается в перекрытии точек данных на 1 или 2 пикселя. Точки данных расположены так близко друг к другу, что вы, вероятно, сможете исправить это, только уменьшив радиус каждой из них, чтобы минимизировать перекрытие.
Может быть, в этом случае, но мне нужно разобраться с другими моментами, более близкими к этим. Поэтому мне приходится иметь дело с перекрытием и показывать точно ту же точку, которая отображается во всплывающей подсказке.
Что вы собираетесь делать с onclick?
Onclick вызовет функцию ajax и покажет некоторые данные с точки.
См. Изменение моего ответа - я обновил строку, чтобы извлечь индекс набора данных из активного объекта всплывающей подсказки - теперь он должен соответствовать отображаемой всплывающей подсказке.
Теперь все идеально! Большое тебе спасибо!
@VictorSoares Я проверил. Попробуйте полностью рабочий фрагмент, который я только что отредактировал в своем ответе. Это прямая копия вашего кодовый ключ, изменяющая только одну указанную мной строку.