当您将鼠标悬停在图表上的点上时,您会看到一条漂亮的垂直线,显示您当前所在的点。我想修改单击事件,以便在单击后悬停时垂直线保持不变。单击时更改线条颜色是理想的,但不是必需的。
如果我单击另一个点,我想删除任何以前的行。关于我如何做到这一点的任何想法?
当您将鼠标悬停在图表上的点上时,您会看到一条漂亮的垂直线,显示您当前所在的点。我想修改单击事件,以便在单击后悬停时垂直线保持不变。单击时更改线条颜色是理想的,但不是必需的。
如果我单击另一个点,我想删除任何以前的行。关于我如何做到这一点的任何想法?
就像我说的,上面的解决方案真的很酷,但是有点像破解(获取准星的路径)到 highcharts 的实现细节中,并且可能在未来的版本中停止工作,可能不是完全跨浏览器(尤其是因为 < IE8 不支持 SVG,添加路径可能仍然有效,因为它应该由 highchart 的添加路径方法处理,但是获取十字准线的路径可能不起作用,我可能错了,我是 SVG 菜鸟)。所以在这里我给你动态添加 plotLines的替代解决方案。PlotLines 还允许一些附加功能,如 dashStyles、标签等。
获取单击点的轴和 x 值(可能不完全重叠十字准线)
var xValue = evt.xAxis[0].value;
var xAxis = evt.xAxis[0].axis;
或者
编辑如果你想让 plotLine 在十字准线的位置而不是点击位置,你可以使用下面的公式(没有直接的 API 来得到这个,从源代码获得,因此如果代码更改可能会停止工作)
var chart = this;
var index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index].x;
添加情节线
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
您可以清理现有的情节线
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
或者
try {
xAxis.removePlotLine(myPlotLineId);
} catch (err) {}
把碎片放在一起
var myPlotLineId="myPlotLine";
...
var chart=this;
index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index];
// var xValue = evt.xAxis[0].value; // To use mouse position and not crosshair's position
var xAxis = evt.xAxis[0].axis;
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
...
你可以通过几种方式做到这一点
Highchart 有一个非常酷的渲染器,它允许您向图表添加各种图形。其中一个选项是添加一条路径,我将在此处进行说明。
我们将重用十字准线的路径并将其添加到图表中,并添加一些其他样式,例如您提到的颜色。可以选择十字准线的路径,因为它是字符串形式,并且可以使用函数this.tooltip.crosshairs[0].d
轻松转换为数组Array.split()
click: function() {
this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
这将完成添加行。您可以将返回的对象存储到一个全局变量中,然后当您要添加另一条这样的行时,您可以通过调用来销毁现有的Element.destroy()
var line;
...
chart:{
events: {
click: function() {
if (line) {
line.destroy();
}
line = this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
}
...
假设您没有太多的元数据要与该行一起显示,这是最简单(或最酷:))的方法。如果您想使用渲染器的文本对象等,您还可以附加元数据。
另一种方法可能是将垂直 plotLines 添加到 xAxis
请参阅我对这个问题的其他解决方案,它适用于缩放、滚动等