Highcharts - 在MouseOver上更改系列颜色

时间:2013-03-07 16:56:38

标签: highcharts linechart

我知道之前已经问过这个问题而且我已经大量使用了其他人提供的答案,但仍然不是100%的方式。

我希望所有系列线都是灰色的,并且线条的一个mouseOver,“打开”它们的颜色,在mouseout上恢复为灰色。

我已经部分工作here但是有一些明显的问题:

  1. 我知道,我已经硬编码了系列阵列的位置。我无法弄清楚如何确定鼠标在哪个系列上。这是最好的方法吗?

     plotOptions: {
            series: {
                events: {
                    mouseOver: function() {chart.series[0].graph.attr('stroke', '#0000FF');
                        $report.html('Moused over')
                        .css('color', 'green');
                    },
                    mouseOut: function() {chart.series[0].graph.attr('stroke', '#C0C0C0');
                        $report.html('Moused out')
                        .css('color', 'red');
                    }
                }
            }
    }    
    
  2. 直到光标离开图表区域时才会触发鼠标输出。如何更精确地跟踪系列线的鼠标事件?

  3. 对我当前代码的任何改进都非常感谢。

2 个答案:

答案 0 :(得分:1)

您可以使用:

 this.graph.attr('stroke', '#0000FF');

而不是硬编码系列: http://jsfiddle.net/jlbriggs/f3Wq2/5/

我有一些相似之处,使用复选框而不是鼠标悬停事件。以防其中有任何有用的东西: http://jsfiddle.net/jlbriggs/57SR9/21/

答案 1 :(得分:0)

我相信这个例子可能是mouseout问题的解决方案:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-events-mouseover-no-sticky/

这个参数可能就是你所需要的:

stickyTracking: false,

在文档中:

http://api.highcharts.com/highcharts#plotOptions.series.events.mouseOut