列チャートを表示datalabel - 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" のようなものを表示することも可能な回避策はあります縦棒グラフのNULL値は？

Answer 1

新しいバージョンのHighchartsフォーマッタは、nullポイントのためにもう呼び出されません。

以前のようにコードを動作させるには、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/

それは動作しますが、それは、エレガントかつ効率的なソリューションではありません。 nullのラベルを描画する方がずっと優れています。オンロードイベント。

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/