在“调整大小和放大图表”上隐藏高图标签

Hide Highcharts labels on resize and enlarge the chart

本文关键字：隐藏 标签 高图 放大 调整      更新时间：2023-09-26

我有一个漏斗图，我需要扩展到整个容器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()
});

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

responsive: {
        rules: [{
          condition: {
            maxWidth: 300
          },
          chartOptions: {
            plotOptions: {
              funnel: {
                dataLabels: {
                enabled: false
              }
            }
          }
        }
      }]
    }

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

如果你不想使用这个特性，你需要使用动态方法，比如serial .update()

series[0].update({
  dataLabels: {enabled: false / true}
});
相关文章：