更新

Question

使用此示例：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

当您将鼠标悬停在图表上的点上时，会得到一条漂亮的垂直线，显示您当前所处的位置。我想修改click事件，以便在单击后将鼠标悬停在垂直线上。更改线条颜色在点击时非常理想，但不是必需的。

如果我点击另一个点，我想删除之前的所有行。关于如何实现这一目标的任何想法？

Answer 1

The above solution就像我说的，真的很酷，但是有点像黑客（获得十字准线的路径）到高图的实现细节，并且可能在将来的版本中停止工作，可能不会完全交叉浏览器（特别是因为＆lt; IE8不支持SVG，添加路径可能仍然有效，因为它应该由highchart的添加路径方法处理，但是获取十字准线的路径可能不起作用，我可能是错的，我是一个SVG菜鸟）。所以我在这里给你dynamically adding plotLines的替代解决方案。 PlotLines还允许一些其他功能，如dashStyles，label等。

获取点击的轴和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();
                }
            });

OR

            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
            });
   ...

Add plot lines at click position @ jsFiddle
Persist crosshair/cursor as plot lines on click @ jsFiddle

Answer 2

您可以通过多种方式实现

Highchart有一个很酷的renderer，可以让你在图表中添加各种图形。其中一个选项是添加path我将在此处说明相同内容。

我们将重复使用十字准线的路径并将其添加到图表中，并添加一些其他样式，例如您提到的颜色。十字准线的路径可以设为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();

        }
    }
...

Persist tooltip / crosshair on click @ jsFiddle

假设您没有多少元数据与线一起显示，这是最简单的（或最酷的:)方法。如果要使用渲染器的文本对象等，也可以附加元数据。

另一种方式可能是adding vertical plotLines to the xAxis

更新

请参阅我的其他解决方案，这个问题适用于缩放，滚动等

HighCharts在Click事件上保持垂直线

2 个答案:

更新