我在创建折线图时遇到了一个关于图表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,
}
});
我的代码输出如下:WAN MoS分数图--x1c 0d1x
因此,当我悬停在相交(绘制)点上时,我希望有一条水平线与同一条垂直线在一起。
请帮助我的人..提前感谢。
2条答案
按热度按时间kcrjzv8t1#
您只需为从工具提示中获取的y坐标添加第二个绘制块,首先移动到chartArea的左侧,您可以通过获取底部和顶部的相同方式获取该坐标,然后在相同的Y轴上向右移动
第一个
编辑:
你应该使用一个自定义的插件,因为你不画每次你移动光标,你可以通过使用一个自定义的插件强制这一点:
第一个
编辑:
更新了v3的答案
第一个
bqf10yzr2#
我在我的一个项目的 * 上一个 * 版本中已经完全做到了这一点(但只有垂直线)。不幸的是,这个功能已经被删除,但旧的源代码文件仍然可以通过我的github访问。
关键是这段代码:
另一个警告是,上述代码适用于Chart.js 2.8,我知道Chart.js的当前版本是3.1。我还没有阅读关于更新的官方手册,但我个人的经验是,这个更新不是100%向后兼容-所以不确定如果您需要Chart.js 3,它是否仍然有效。(当然,你可以先试试2.8,如果它能用,你就可以调整代码,让它在3.1上工作)