如何在HighCharts散点图上设置点的z-index？

Question

我正在使用HighCharts绘制几百个点.每个点都有一个不透明度值,突出显示时变为红色.然而,当我突出显示某些点时,很难看到它们,因为有点过多的点.

我想要的是所选点清晰可见,如下所示:

我使用以下代码在图表上选择点:

updateChart = function(x){

    for (i=0; i<chart.series[0].data.length; i++){

        if(chart.series[0].data[i].config[2] == x){       
            chart.series[0].data[i].graphic.attr({'fill':'red', 'z-index':1000})
        }
        else{
            chart.series[0].data[i].graphic.attr('fill', 'rgba(0,255,0,0.6)')
        }        
    }
}

我已经尝试设置z-index该点的值,但它似乎没有区别(我也尝试过'z-index':'1000').还有另一种方法可以确保突出显示的点显示在所有其他点之上吗？

Answer 1

更新截至2014年

这是一个老问题,但我认为我会在2014年更新它为highcharts.现在可以使用内置方法Element.toFront()自动弹出并重新附加到顶部.

在数据索引处移动点的示例i将是:

chart.series[0].data[i].graphic.toFront()

这就是全部!

API源码

Answer 2

不幸的是,每个点都没有zIndex属性.但是就像Bubbles提到的那样,你总是可以将点添加到最后,这样它就会被渲染到最后,因此显示在最顶层.

此外,我建议利用states:selecthighcharts选项,而不是循环遍历所有点并直接向元素添加样式.然后,您可以为所选状态设置特定样式,您需要做的就是触发select()要突出显示的点

    marker: {
        states: {
            select: {
                fillColor: '#00ff00'
            }
        }
    }

这里是你如何可以通过它推至年底,并触发一个突出显示该点select()就可以了

function highlightPoint(point){
    //save the point state to a new point
    var newPoint = {
        x: point.x,
        y: point.y
    };
    //remove the point
    point.remove();
    //add the new point at end of series
    chart.series[0].addPoint(newPoint);
    //select the last point
    chart.series[0].points[chart.series[0].points.length - 1].select();
}

demo @ jsFiddle