Question

我正在使用HighCharts绘制几百个点。每个点都有一个不透明度值，突出显示时变为红色。但是，当我突出显示某些点时，很难看到它们，因为存在点积分。

enter image description here

我希望所选的点清晰可见，如下所示：

enter image description here

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

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 source

Answer 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

Answer 3

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

Answer 4

上述解决方案的细微差别，因为上述建议对我没有用。我遇到了一种情况，即尽管显示了工具提示，但在区域重叠时，工具图的点在面积图中还是不可单击的。

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

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

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

4 个答案:

截至2014年的更新