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

我正在使用 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' )。有没有另一种方法可以确保突出显示的点显示在所有其他点之上？

最佳答案

不幸的是，每个点都没有 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

关于javascript - 如何在 HighCharts 散点图上设置点的 z-index？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13319476/