Нарисуйте горизонтальную и вертикальную линию при наведении курсора мыши на диаграмме JS. ⇐ Php

[Anonymous]

У меня возникла проблема с диаграммой JS при создании линейной диаграммы. Я хочу создать диаграмму с указанными данными, а также мне нужно иметь горизонтальную и вертикальную линию при наведении курсора на точку пересечения. Я могу создать вертикальную линию при наведении курсора, но не могу найти решения, в котором я мог бы нарисовать обе линии. Вот мой код для рисования вертикальной линии при наведении курсора.

Код: Выделить всё

    window.lineOnHover = function(){
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);

if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.legend.bottom,
bottomY = this.chart.chartArea.bottom;

// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.setLineDash([3,3]);
ctx.strokeStyle = '#FF4949';
ctx.stroke();
ctx.restore();
}
}
});
}

//create chart
var backhaul_wan_mos_chart = new Chart(backhaul_wan_mos_chart, {
type: 'LineWithLine',
data: {
labels: ['Aug 1', 'Aug 2', 'Aug 3', 'Aug 4', 'Aug 5', 'Aug 6', 'Aug 7', 'Aug 8'],
datasets: [{
label: 'Series 1',
data: [15, 16, 17, 18, 16, 18, 17, 14, 19, 16, 15, 15, 17],
pointRadius: 0,
fill: false,
borderDash: [3, 3],
borderColor: '#0F1731',
//                    backgroundColor: '#FF9CE9',
//                    pointBackgroundColor: ['#FB7BDF'],
borderWidth: 1
}],
//                lineAtIndex: 2,
},
options: {
tooltips: {
intersect: false
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
ticks: {
fontColor: '#878B98',
fontStyle: "600",
fontSize: 10,
fontFamily: "Poppins"
}
}],
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0,
max: 50,
stepSize: 10,
fontColor: '#878B98',
fontStyle: "500",
fontSize: 10,
fontFamily: "Poppins"
}
}]
},
responsive: true,
}
});

вывод кода выглядит следующим образом: График оценки MoS WAN --


Поэтому я хочу, чтобы при наведении курсора мыши на пересечение была горизонтальная линия с такой же вертикальной линией ( задумано) точка..
Пожалуйста, помогите моим ребятам.. Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/701 ... n-chart-js