在Highcharts中隐藏特定图表宽度的数据标签

Hide dataLabels at specific chart width in Highcharts

本文关键字：数据 标签 Highcharts 隐藏      更新时间：2023-09-26

我正在尝试使用javascript，以便当图表大小低于一定阈值时，数据标签被隐藏。我在一个序列数组中初始化了数据标签。下面是该数组的一个片段:

 {
    name: 'Muni floaters',
    color: '#009fdf',
    data: [355.000],
    id: 'columnText',
    dataLabels: {
        enabled: true,
        inside: true,
        //align: 'right',
        x: 135,
        format: '<b>{series.name}</b>',
        color: '#009fdf',
        style: {
            fontSize: '12px'
        }
    }
}, {
    name: 'Bank loans',
    color: '#004b87',
    data: [622.955],
    id: 'columnText',
    dataLabels: {
        enabled: true,
        inside: true,
        //align: 'left',
        x: -130,
        format: '<b>{series.name}</b>',
        color: '#004b87',
        style: {
            fontSize: '12px',
        }
    }
}

我尝试了以下javascript来禁用系列数据标签，但只收到错误。

function responsiveText(){
    if ($('#container').width() < 578){
        var chart = $('#container').highcharts();
        var options = chart.options;
        options.series.dataLabels.enabled = false;
        chart = new Highcharts.Chart(options);
    }
    else{
        var chart = $('#container').highcharts();
        var options = chart.options;
        options.series.dataLabels.enabled = true;
        chart = new Highcharts.Chart(options);
    }

}
$( window ).resize(function() {
    responsiveText();
});

任何想法?

不要尝试使用:

重新初始化图表
chart = new Highcharts.Chart(options);

请使用系列更新方法。

function responsiveText(){
    Highcharts.charts[0].series[0].update({
        dataLabels: {
            enabled: !($('#container').width() < 578)
        }
    }, true);
}

相关文章：