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

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 年的更新

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

在数据索引处移动点的示例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();
}

演示@jsFiddle

Answer 3

Highcharts 由 svg 元素组成，它们不受 z-index 之类的直接控制。但是，您仍然可以控制在什么之上呈现哪些元素- svg 树中的最后一个元素被绘制在其余元素之上，因此要将元素提升到前面，您只需将其弹出，并附加到包含图表。

Answer 4

上述解决方案的细微差别，因为上述建议对我不起作用。我有一个案例，尽管显示了工具提示，但当区域重叠时，工具提示的点在区域图中不可点击。

它通过在工具提示格式化程序中添加上面的解决方案但添加到父组来解决。

tooltip :{
   ...
   formatter () {
        this.point.graphic.parentGroup.toFront();
        ...
   }
}