Javascript 柱状图显示空值的datalabel-Highcharts

这个问题可能是重复的

及

但建议的解决方案在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上的问题似乎仍然存在：

---

是否有一种可能的解决方法，可以使用格式化程序函数或图表显示“N/a”之类的内容。柱形图表中空值的渲染器方法？

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

让代码像以前一样工作的一种常见方法是包装

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;
                }
            },

例如：

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

    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
          });
        }
      })
    }
  }
},

---

示例：

在新版Highcharts中，不再为空点调用格式化程序

让代码像以前一样工作的一种常见方法是包装

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;
                }
            },

例如：

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

    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
          });
        }
      })
    }
  }
},

---

示例：

谢谢。它工作得很好，我能够将它推广到多个系列：。。但标签的定位变得更加困难。此方法需要对空值进行更多的预处理，但无需手动定位标签。非常感谢。它工作得很好，我能够将它推广到多个系列：。。但标签的定位变得更加困难。此方法需要对空值进行更多的预处理，但无需手动定位标签。