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

调整大小时隐藏Highcharts标签并放大图表

1 个答案: