1

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

当您将鼠标悬停在图表上的点上时,您会看到一条漂亮的垂直线,显示您当前所在的点。我想修改单击事件,以便在单击后悬停时垂直线保持不变。单击时更改线条颜色是理想的,但不是必需的。

如果我单击另一个点,我想删除任何以前的行。关于我如何做到这一点的任何想法?

4

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

在单击位置添加绘图线@ jsFiddle
Persist 十字准线/光标作为单击@ jsFiddle 时的绘图线

于 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();

        }
    }
...

单击@ jsFiddle 时保持工具提示/十字准线

假设您没有太多的元数据要与该行一起显示,这是最简单(或最酷:))的方法。如果您想使用渲染器的文本对象等,您还可以附加元数据。

另一种方法可能是将垂直 plotLines 添加到 xAxis

更新

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

于 2012-08-21T19:30:42.293 回答