动态更新Highcharts区间图表的数据标签（区分上下数据标签）

我基于Highcharts哑铃图制作了带按钮的示例，默认想隐藏区间上方的数据标签，通过代码控制标签的显示与隐藏。核心配置中，dataLabels数组的第一个元素对应上方标签，第二个对应下方标签：

series: [{
    name: 'Life expectancy change',
    data: data,
    dataLabels: [{
        enabled: true
    },
    {
        enabled: false
    }]
}]

使用chart.update()更新时，让上下标签都显示的配置可以生效：

document.getElementById('showLabels').addEventListener('click', () => {
    let updateConfig = {
        series: [{
            dataLabels: [{
                enabled: true
            },
            {
                enabled: true
            }]
        }]
    };
    myChart.update(updateConfig,true,true,true);
});

但隐藏上方、显示下方标签的配置失效，上方标签仍然可见：

document.getElementById('lowerLabels').addEventListener('click', () => {
    let updateConfig = {
        series: [{
            dataLabels: [{
                enabled: false
            },
            {
                enabled: true
            }]
        }]
    };
    myChart.update(updateConfig,true,true,true);
});

请问有没有更优的实现方式？

Highcharts在更新哑铃图的dataLabels数组时，直接通过全局chart.update()替换数组可能存在配置合并的逻辑问题。更可靠的方式是直接操作系列实例或优化更新方式：

方法一：使用series.update()替代全局chart.update() #

直接针对目标系列调用update方法，能更精准地覆盖配置，避免全局更新的合并冲突：

document.getElementById('lowerLabels').addEventListener('click', () => {
    myChart.series[0].update({
        dataLabels: [{
            enabled: false
        }, {
            enabled: true
        }]
    }, true, true, true);
});

方法二：直接操作数据标签实例 #

通过系列的dataLabelsGroups属性直接获取对应标签组，调用update修改状态，逻辑更直观：

document.getElementById('lowerLabels').addEventListener('click', () => {
    const targetSeries = myChart.series[0];
    // dataLabelsGroups[0]对应上方标签，[1]对应下方标签
    targetSeries.dataLabelsGroups[0].update({ enabled: false });
    targetSeries.dataLabelsGroups[1].update({ enabled: true });
});

方法三：初始化时指定index明确标签对应关系 #

在初始化配置中给每个dataLabels项添加index属性，后续更新时能更清晰地对应高低标签，减少出错概率：

// 初始化配置
series: [{
    name: 'Life expectancy change',
    data: data,
    dataLabels: [{
        index: 0, // 标记为上方标签
        enabled: true
    }, {
        index: 1, // 标记为下方标签
        enabled: false
    }]
}]

// 更新操作
document.getElementById('lowerLabels').addEventListener('click', () => {
    myChart.series[0].update({
        dataLabels: [{
            index: 0,
            enabled: false
        }, {
            index: 1,
            enabled: true
        }]
    }, true);
});

完整优化后的代码 #

const data = [{
    name: 'Austria',
    low: 70.1,
    high: 81.3
}, {
    name: 'Belgium',
    low: 71.0,
    high: 81.9
}];

let myChart = Highcharts.chart('container', {
    chart: {
        type: 'dumbbell',
        inverted: true
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Life Expectancy (years)'
        }
    },
    series: [{
        name: 'Life expectancy change',
        data: data,
        dataLabels: [{
            enabled: true
        }, {
            enabled: false
        }]
    }]
});

document.getElementById('showLabels').addEventListener('click', () => {
    myChart.series[0].update({
        dataLabels: [{ enabled: true }, { enabled: true }]
    }, true);
});

document.getElementById('hideLabels').addEventListener('click', () => {
    myChart.series[0].update({
        dataLabels: [{ enabled: false }, { enabled: false }]
    }, true);
});

document.getElementById('upperLabels').addEventListener('click', () => {
    myChart.series[0].update({
        dataLabels: [{ enabled: true }, { enabled: false }]
    }, true);
});

document.getElementById('lowerLabels').addEventListener('click', () => {
    myChart.series[0].update({
        dataLabels: [{ enabled: false }, { enabled: true }]
    }, true);
});

内容的提问来源于stack exchange，提问作者pingin