如果数字不适合堆积条，则 Highcharts 导出隐藏数据标签

Question

我正在使用 highcharts 并想在主图表上禁用数据标签，但在导出的图表中显示它们。但是，如果数据小于一定数量，我也想隐藏导出图形中的标签。我已经看到 post 关于如何根据高度管理显示哪些数据标签：Highcharts stacked bar chart hide data labels not to overlap. However, I am not sure how to show certain datalabels only in the exported graph. This is my graph: https://jsfiddle.net/er1187/nbjh5jz3/ 导出时，我想隐藏这些未正确显示的数据标签：

我尝试使用溢出和裁剪但无法修复外观，所以我想隐藏它们。

plotOptions:{
  series: {
    dataLabels: {
      enabled: true,
      inside: true,
      allowOverlap: false,
      crop: true,
      overflow: 'none',
    }
  }
}

Answer 1

Fiddle demo with reference of this post。这是一种使用 dataLabels 格式化程序和 load 事件

的破解方法

Highcharts.setOptions({ // Apply to all charts
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'bar',
    events: {
      load: function() {
        var chart = this;

        $.each(chart.series, function(i, serie) {
          $.each(serie.data, function(j, data) {

            if (data.yBottom - data.plotY < 15) data.dataLabel.hide();
            //
          });
        });
      }
    }
  }
});

Highcharts.chart('container', {
  exporting: {
    chartOptions: {
      legend: {
        enabled: false,
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          dataLabels: {
            inside: true,
            enabled: true,
            style: {
              fontSize: '5px',
              textOutline: 'none'
            },
            formatter: function() {
              return Highcharts.numberFormat(this.y, 1)
            }
          }
        }
      }
    }
  },

  plotOptions: {
    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        formatter: function() {
          return ''
        }
      }
    },

  },

  series: [{
    name: 'one',
    data: [5.24957, -1.636452, 5.511623, -5.797109, 6.975687, 4.622862, 2.902466, 3.992426, -0.270407, 3.184849, 12.249839]
  }, {
    name: 'two',
    data: [-1.311533, 2.508312, .97956, -1.725764, 5.177992, 2.1262, 5.41721, 53.811967, 4.060668, -1.317636, 13.763589]
  }]
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

更新

Above example work on all formats except PDF when using Client side export

使用来自 post 的线程修复 而不是隐藏标签，在加载

时销毁它们

Highcharts.setOptions({ // Apply to all charts
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'bar',
    events: {
      load: function() {
        var chart = this;

        $.each(chart.series, function(i, serie) {
          $.each(serie.data, function(j, data) {
            if (data.yBottom - data.plotY < 15) data.dataLabel = data.dataLabel.destroy();
            //
          });
        });
      }
    }
  }
});

如果数字不适合堆积条，则 Highcharts 导出隐藏数据标签

Highcharts exporting hide data labels if number doesn't fit in stacked bar

export

labels

highcharts