HighCharts在点击事件时保持垂直线 [英] HighCharts Keep Vertical Line on Click Event

问题描述

使用这个例子： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and当您将鼠标悬停在图表上的点上时，您会看到一条很好的垂直线，显示您当前所在的点。我想修改点击事件，以便在点击鼠标后悬停时垂直线保持不变。如果点击另一点，我想删除任何以前的行。如果我点击另一个点，我想删除任何以前的行。关于如何实现这一点的任何想法？

解决方案

您可以通过多种方式来完成此任务

Highchart拥有非常酷的渲染器，可让您添加各种图形到图表。其中一个选项是添加一个路径，我将在此处进行说明。

我们将重复使用十字准线的路径，并将其添加到图表中，并添加一些其他样式，例如您提及的颜色。十字准线的路径可以被视为 this.tooltip.crosshairs [0] .d 这是字符串形式，可以使用<$ c轻松转换为数组$ c $> Array.split（） function

  click：function（）{
 （this.tooltip.crosshairs [0] .d.split（））。attr（{
'stroke-width'：2，
 stroke：'red'
}）。add（）; 
} 
  

这将完成添加行。您可以将返回的对象存储到全局变量中，然后当您要添加另一行时，可以通过调用 Element.destroy（） $ b

  var line; 
 ... 
图：{
 events：{
 click：function（）{
 
 if（line）{
 line。破坏（）; 
} 
 line = this.renderer.path（this.tooltip.crosshairs [0] .d.split（））。attr（{$ b $'stroke-width'：2， 
 stroke：'red'
}）。add（）; 
 
 
 
 
 $ / code> 

在click @ jsFiddle上坚持提示/十字准线

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

另一种方式可以是在xAxis中添加垂直plotLines
$ b

UPDATE

将我的其他解决方案引用到这个问题中，这将适用于缩放，滚动等。

Using this example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

When you hover over points on the chart, you get a nice vertical line showing you which point you're currently on. I want to modify the click event so that the vertical line stays when I hover away after a click. Changing the line color would be ideal on click, but not necessary.

If I click another point I'd want to remove any previous lines. Any ideas on how I could accomplish this?

解决方案

You can do it in several ways

Highchart has a very cool renderer that allows you to add various graphics to the chart. One of the options is to add a path I will be illustrating the same here.

We shall reuse the path of the crosshair and add the same to the chart with some additional styles like color you mentioned. The path of the crosshair can be optained as this.tooltip.crosshairs[0].d this is in string form and can be easily converted to an array using the Array.split() function

click: function() {
    this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
        'stroke-width': 2,
         stroke: 'red'
  }).add();
}

This will accomplish adding the line. You can store the returned object into a global variable and then when you are about to add another such line, you can destroy the existing one by calling 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

Assuming you don't have much meta data to be shown along with the line, this is the easiest (or the coolest :) ) approach. You can also attach meta data if you want to using the renderer's text object etc.

An alternate way could be adding vertical plotLines to the xAxis

UPDATE

Refer my other solution to this question, that would work with zoom,scroll,etc

这篇关于HighCharts在点击事件时保持垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！