Question

我正在尝试使用javascript，以便当图表的大小低于某个阈值时，数据标签会被隐藏。我有一系列数组启动的dataLabels。这是阵列中的一个片段。

 {
    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来禁用系列dataLabels但只收到错误。

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

});

任何想法？

Answer 1

请勿尝试使用以下命令重新启动图表：

chart = new Highcharts.Chart(options);

而是使用系列update方法。

function responsiveText(){

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

}

小提琴演示here。

在Highcharts中隐藏特定图表宽度的dataLabels

1 个答案: