Question

我正在使用highcharts并且想要在主图上禁用数据标签，但是在导出的图中显示它们。但是，如果数据小于某个数字，我也想在导出的图形中隐藏标签。我已经看过这篇关于如何管理根据高度显示哪些数据标签的帖子：Highcharts stacked bar chart hide data labels not to overlap。但是，我不确定如何仅在导出的图形中显示某些数据标签。这是我的图表：https://jsfiddle.net/er1187/nbjh5jz3/ 当我导出时，我想要隐藏这些未正确显示的数据标签：

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

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

Answer 1

Fiddle demo参考此post。这是一种具有dataLabels格式化程序和load事件

的黑客攻击

＆＃13;

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

＆＃13;

<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>

＆＃13;

更新

以上示例在使用客户端导出时使用除PDF以外的所有格式

使用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导出隐藏数据标签，如果数字不适合堆叠条

1 个答案: