Question

我在Highchart图表中有两个系列。两者都处理事件，如 mousemove （显示工具提示）和鼠标点击。

不幸的是，其中一个系列是area系列，阻止了另一个系列触发的任何事件。

假设我已经有了那些情节选项系列：

plotOptions: {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                    alert ('Category: '+ this.category +', value: '+ this.y);
                }
            }
        }
    }
},

series: [{
    color:'red',
    data: [29.9, 51.5, 16.4, 19.2, 44.0, 16.0, 35.6, 48.5, 26.4, 4.1, 9.6, 54.4]        
},
{
    type:'area',
    data: [39.9, 75.5, 120.4, 150.2, 130.0, 120.0, 140.6, 158.5, 216.4, 194.1, 95.6, 54.4]}
]

}

如此JSFiddle

中所示

我永远不能点击或看到红色系列点上的工具提示。

我能做的是改变系列的顺序，使红色系列的顺序为蓝色。（like this）。但我的情况是我有几个区域图表相互like that。在这种情况下，更改顺序将无济于事。有没有办法可以通过填充区域处理事件？

Answer 1

好的，我发现了一种适合我需要的方法：如本主题所示，模拟SVG元素顺序： SVG re-ordering z-index (Raphael optional)

我在图表的重绘事件中使用此代码：

redraw : function(){
    //get a reference on the first series svg element.
    var svgSeriesParent = document.querySelectorAll('.highcharts-series')[0];

    //loop on all the path drawn by highchart
    var pathArray = document.querySelectorAll('path');

    for (var pathIndex = 0; pathIndex < pathArray.length; pathIndex++) {
        var pathObj = pathArray[pathIndex];
        //if attribute fill is not "none", this is an area path.
        if ($(pathObj).attr('fill') !== "none") {

            //move the current fill path before the first series svg element.
            svgSeriesParent.insertBefore(pathObj, svgSeriesParent.firstChild);
        }
    }
}

查看此JSFiddle

中的结果

限制： 填充区域不再具有相同的svg组，因此隐藏/显示系列被破坏：所有填充区域被认为是第一个系列的一部分。（点击图例查看）。

在我的情况下，我不需要隐藏系列，所以我将继续使用此解决方案。

svg命令操作并不复杂，这就是为什么我希望高图来管理这种情况：添加一个fillZIndex参数似乎并不困难，可能非常有用......

Answer 2

只有我想到的是使用4个系列，2个区域和2个线并使用index。

http://jsfiddle.net/j8qYK/3/

如何通过高图填充颜色管理事件？

2 个答案: