Question

当数据标签在Highcharts中重叠时，只显示一个数据标签。这似乎是随机处理的。见小提琴：

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Label Test'
        },
        series: [{
            type: 'line',
            data: [ 10, 10, 10, 10, 10, 10, 50],
            dataLabels: {
              enabled: true,
              color: 'blue',
              zIndex: 10
            },
            zIndex: 10
        },
        {
            type: 'line',
            data: [ 11, 11, 11, 11, 11, 11, 49],
            dataLabels: {
              enabled: true,
              color: 'red',
              zIndex: 10
            },
            zIndex: 20
        }]
    });
});

请注意，图表中显示的第一个数据标签来自第二个系列，而其余数据来自第一个系列。

我尝试在系列和 series.dataLabel 中使用zIndex设置标签显示的优先级，但没有运气。

有没有办法设置它，以便当Highcharts确定要显示哪个标签时，指定系列始终优先？

Answer 1

一种可能的解决方法是为每个点提供labelrank，用于评估其排序顺序。如果您为系列中的每个点提供此等级，则该系列应被视为“上方”系列，而不具有此等级（或具有较低等级的整数值）。

在代码中，手动为每个点：

series: [{
    data: [ 
        { y: 11, labelrank: 1 }, 
        { y:11, labelrank: 1 } 
        // ...
    ],
    // ...
}]

在代码中，使用回调函数（JSFiddle）：

$('#container').highcharts({
    // Options ...
}, function() {
    var mySeriesIndex = 1;

    // For each point in the preferred series
    for(i = 0; i < this.series[mySeriesIndex].points.length; i++)
        // Set a labelrank
        this.series[mySeriesIndex].points[i].labelrank = 1;
});

我目前对这个问题的看法是：

对于重叠逻辑的当前实现，在我看来这是一种意想不到的行为。源代码使用Array.sort来改变点标签的位置，因为Array.sort不能保证稳定（相同值项不会保留其原始顺序）。

如果你在Firefox中检查你的例子它应该按预期工作（它们的Array.sort的实现是不同的），而在Chrome中它不是（不稳定）。你可能希望这个小功能得到修复。

Highcharts显示重叠标签的优先级

1 个答案: