在图例点击上显示/隐藏dataLabels

时间:2017-12-21 06:43:47

标签: javascript jquery highcharts

我正在使用Highcharts中的Stacked Column Chart。我要求在每次点击图例时,应显示/隐藏该系列上的dataLabels,但不应隐藏系列/堆栈。所以我只想隐藏/显示dataLabels。

我尝试了这个并让系列停止隐藏使用它:

events: {
    legendItemClick: function () {
        return false; // <== returning false will cancel the default action
    }
}

但是我无法在点击图例时显示dataLabels。

这是Fiddle Link

2 个答案:

答案 0 :(得分:1)

legendItemClick: function (x) {
                    x.preventDefault()
                  var opt = x.target.chart.options.plotOptions.series;
    opt.dataLabels.enabled = !opt.dataLabels.enabled;
    x.target.chart.series[x.target.index].update(opt);
                  //x.target.chart.options.plotOptions.series.dataLabels.enabled=false
                   // <== returning false will cancel the default action
                    }

答案 1 :(得分:0)

谢谢@undefined_variable的答案。

我找到了另一种方法,使用this

legendItemClick: function () {
    var enabled = !this.options.dataLabels.enabled;
    this.update({
        dataLabels:{
            enabled: enabled
        }
    });
    return false; 
}

Fiddle