如何在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

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

此外，我建议不要循环遍历所有点并直接向元素添加样式，而是建议利用highcharts的states:select选项。然后，您可以为所选状态设置特定样式，您需要做的就是在要突出显示的点上触发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

Answer 2

更新截至2014年

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

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

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

这就是全部！

API source

Answer 3

Highcharts由svg元素组成，这些元素不受z-index之类的直接控制。然而，you still can control what elements are rendered ontop of what - svg树中的最后一个元素被绘制在其余元素上，因此要将元素提升到前面，你可以将其弹出，并附加到包含图表的svg元素。