当您将鼠标悬停在图表上的点上时，您会看到一条漂亮的垂直线，显示您当前所在的点。我想修改单击事件，以便在单击后悬停时垂直线保持不变。单击时更改线条颜色是理想的，但不是必需的。
如果我单击另一个点，我想删除任何以前的行。关于我如何做到这一点的任何想法？
4164 次
2 回答
4
就像我说的，上面的解决方案真的很酷，但是有点像破解（获取准星的路径）到 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
});
...
于 2012-08-21T20:20:45.623 回答
2
你可以通过几种方式做到这一点
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
更新
请参阅我对这个问题的其他解决方案，它适用于缩放、滚动等
于 2012-08-21T19:30:42.293 回答