更新显示范围的图表的 highcharts 数据标签（区分上部和下部数据标签）

Question

我想更新动态显示范围的图表的数据标签。

我在这里创建了一个带有按钮的 JSFiddle（基于哑铃图的 HighChart 演示之一）。默认情况下，我想隐藏范围内的上部数据标签，但以编程方式我希望能够打开和关闭标签。下面是一个代码片段，仅保留了相关位，这里是一个工作 JSFiddle 的链接：https://jsfiddle.net/uja5y1rz/

我不清楚 API 中如何区分低数据标签和高数据标签，但它似乎适用于数组（也许我不应该这样做......）。第一个数组元素定义上部标签的参数，第二个数组元素定义下部数据表的参数。在该系列中，我有：

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

我想在绘制图表后更新数据标签，这就是我遇到问题的地方。我真的很想用 JSON 对象来做这个。我可以让它们都出现（例如，下面将使它们都出现）：

                    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);
});

有更好的方法吗？

谢谢！

大卫

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', () => {
                                        console.log("button clicked")
                    let updateConfig = {
                        series: [{
                            dataLabels: [{
                                        enabled: true
                                },
                                {
                                        enabled: true
                                }]
                                }]
                  };
                
                    myChart.update(updateConfig,true,true,true);
});

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

document.getElementById('upperLabels').addEventListener('click', () => {
                    let updateConfig = {
                        series: [{

                            dataLabels: [{
                                        enabled: true
                                },
                                {
                                        enabled: false
                                }]
                                }]
                  };
                
                    myChart.update(updateConfig,true,true,true);
});

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

Answer 1

Highcharts 不完全支持单独处理哑铃系列中的数据标签。最好的方法似乎是直接对数据标签元素进行操作。

例如：

document.getElementById('upperLabels').addEventListener('click', () => {
  myChart.series[0].points.forEach(point => {
    point.dataLabel.hide();
    point.dataLabelUpper.show();
  });
});

---

现场演示：https://jsfiddle.net/BlackLabel/27ca0mon/

API 参考： https://api.highcharts.com/class-reference/Highcharts.SVGElement#show