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

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

但建议的解决方法已在 highcharts 5.0.7 版中停止工作。

formatter: function () {
    if (this.y == null) {
        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
        });

    } else {
        return this.y;
    }
}

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

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

是否有可能的解决方法来使用格式化程序函数或chart.renderer 方法在柱形图中为空值显示类似“N/A”的内容？

Answer 1

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

让你的代码像以前一样工作的一个 hacky 方法是包装 drawDataLabels() 方法并临时为空点分配一些值，例如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/