Question

这个问题可能是重复的 Show N/A in datalabels, when value is null - Highcharts

和 dataLabels for bar chart in Highcharts not displaying for null values in 3.0.8

但建议的解决方法已停止在高级图表的5.0.7版中工作。

dt$wt

这个问题似乎仍然在github上开放： https://github.com/highcharts/highcharts/issues/2899

http://jsfiddle.net/90amxpc1/4/

是否有可能的解决方法来显示类似＆＃34; N / A＆＃34;使用格式化函数或chart.renderer方法对列图中的空值进行处理？

Answer 1

在新版本的Highcharts格式化程序中不再调用null点。

使代码按原样工作的一种hacky方法是包装drawDataLabels()方法并临时为null点分配一些值，例如： 0，格式化程序检查point.isNull是否为真。

var H = Highcharts;

H.wrap(H.Series.prototype, 'drawDataLabels', function (p) {
  this.points.forEach(point => {
    if (point.y === null) {
      point.y = 0;
    }
  });

  p.call(this);

  this.points.forEach(point => {
    if (point.isNull) {
      point.y = null;
    }
  });
});

在数据标签配置中：

 dataLabels: {
            formatter: function () {
                if (this.point.isNull) {
                    var chart = this.series.chart,
                        categoryWidth = chart.plotWidth / chart.xAxis[0].categories.length,
                        offset = (this.point.x) * categoryWidth + categoryWidth / 2,
                        text = chart.renderer.text('N/A', -999, -999).add();

                    text.attr({
                        x: chart.plotLeft + offset - text.getBBox().width / 2, //center label
                        y: chart.plotTop + chart.plotHeight - 8 // padding
                    });

                    return false;
                } else {
                    return this.y;
                }
            },

示例：http://jsfiddle.net/xnxpwt67/

它有效，但它不是一个优雅而有效的解决方案。更好的是为空值绘制标签，例如在加载事件。

    chart: {
  type: 'column',
  events: {
    load: function() {
      const categoryWidth = this.plotWidth / this.xAxis[0].categories.length;

      this.series[0].points.forEach(point => {
        if (point.y === null) {
          const offset = point.x * categoryWidth + categoryWidth / 2;
          const text = this.renderer.text('N/A', -999, -999).add();

          text.attr({
            x: this.plotLeft + offset - text.getBBox().width / 2,
            y: this.plotTop + this.plotHeight - 8
          });
        }
      })
    }
  }
},

示例：http://jsfiddle.net/xnxpwt67/1/

柱形图显示null值的数据标签 - Highcharts

1 个答案: