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

【问题标题】：How to set the z-index of points on a HighCharts scatter plot?如何在 HighCharts 散点图上设置点的 z-index？
【发布时间】：2012-11-10 05:14:12
【问题描述】：

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

【问题讨论】：

我们可以用 jsFiddle 摆弄吗？

标签： javascript charts highcharts

【解决方案1】：

2014 年更新

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

在数据索引i 处移动点的示例如下：

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

仅此而已！

API source

【讨论】：

这对积分有什么作用？即，将当前选择的（通过单击或悬停）点重新绘制到其他点之上？
只需更新 series > point > events > mouseOver 属性以使用具有此行的函数：this.graphic.toFront();

【解决方案2】：

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

【讨论】：

感谢您的建议 - 这很有意义，但我无法弄清楚 chart.series[0].points 的结构。 chart.series[0] 在 Firebug 中检查时没有 points 属性。
chart.series[0].points 在你调用new Highcharts.Chart(...); 后由highcharts 添加检查jsfiddle.net/4ctuy/3 我添加了以下日志，这会给你一个想法var chart = new Highcharts.Chart(chartingOptions); console.log(typeof chart.series[0].points); console.log(chart.series[0].points.length); 你应该看到这两个登录您的控制台。如果您在实际代码中没有看到类似的内容，请检查您可能正在使用的 highcharts 版本与我使用的版本 @celenius
我想知道区别是否在于使用 HighStock 和 HighCharts。这似乎是我在您的示例中可以看到的加载库的唯一区别。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：