javascript - 在调整大小和放大图表时隐藏 Highcharts 标签

Question

我有一个漏斗图，当页面调整大小(并变薄)时，我需要将其扩展到整个容器 div

我尝试以编程方式隐藏调整大小时的标签，但图表仍保留在 div 的一侧

https://jsfiddle.net/MicheleC/9oh3ttss/7/

function toogle_chart_label(chart, series, show){
    var opt = chart.series[series].options;
    if(typeof show == 'undefined') {
        opt.dataLabels.enabled = !opt.dataLabels.enabled;
    } else {
        opt.dataLabels.enabled = show
    }
}

function funnel_labels_adjust(){
    if($('#container').width() < 300){
        toogle_chart_label(funnel_chart, 0, false)
    } else {
        toogle_chart_label(funnel_chart, 0, true)
    }
}

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

Answer 1

在 Highcharts 5 中有一个新属性 responsive 。它允许您指定在某些条件下应用的图表选项。在您的情况下，您希望在图表宽度低于 300 时禁用数据标签。

responsive: {
        rules: [{
          condition: {
            maxWidth: 300
          },

          chartOptions: {
            plotOptions: {
              funnel: {
                dataLabels: {
                enabled: false
              }
            }
          }
        }
      }]
    }

示例:https://jsfiddle.net/9oh3ttss/8/

如果您不想使用该功能，则需要使用动态方法，例如 series.update()

series[0].update({
  dataLabels: {enabled: false / true}
});