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

Question

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

不幸的是，那些系列中的一个是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顺序操作并不复杂，这就是为什么我希望highchart处理这种情况：添加fillZIndex参数似乎并不困难，而且可能非常有用...

Answer 2

我只想到使用4系列，2面积和2线并使用index。

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