1

I've got two series in an Highchart graph. Both are handling event like mousemove (to show tooltip) and mouse click.

Unfortunatly one of those series is an area serie which block any event to be triggered by the other one.

Let's say I've got those series with those plot options : 

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]}
]
}

as seen in this JSFiddle

I can never click or see the tooltip on the red series points.

What I could do is to change the order of the series so the red one is over the blue one. ( like this). But I've got situations where I've got several area graphs over each other like that. In this case, change the order won't help. Is there a way I can handle events through the fill area?

4

2 回答 2

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参数似乎并不困难，而且可能非常有用......

于 2013-06-19T15:08:18.617 回答
0

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

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

于 2013-06-19T11:30:51.223 回答