web-dev-qa-db-ja.com

単純な棒グラフの合計に対するハイチャートの割合

各棒が公称値を持つ単純な1シリーズの棒グラフがあります。各バーの値を表すデータラベルと軸を使用してこれを細かくプロットできますが、データラベルと軸にシリーズの合計のパーセンテージを表示させ、ホバーのツールチップに名目値を表示させます（したがって、プロットする前にデータをパーセンテージに変換したくありません）。

これが私が何をしているのか、そして今どこにいるのかを示す画像です：

フィドル

enter image description here

以下は、フォーマッター関数として軸ラベルに現在持っているものです。

_plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    formatter: function(){
                        return Highcharts.numberFormat(this.y,0);
                    }
                }
            }
        }
_

これを達成するために使用できるformatter関数変数はありますか？私はそれが円グラフで簡単にできることを知っていますが、棒グラフはデータをはるかによく表していると感じています。

編集：簡単に言うと、シリーズのすべてのポイントの合計を取得するにはどうすればよいですか？これが得られたら、割合を取得するのは簡単です。

return Highcharts.numberFormat(100 * this.y / this.y.total,0) + "%";

ここで、_this.y.total_はシリーズの合計です。

javascriptchartshighcharts
9
harryg

データをループして合計を取得し、datalabelフォーマッター関数を使用してパーセントを取得する必要があります。

ここに例：

http://jsfiddle.net/JVNjs/319/

formatter:function() {
  var pcnt = (this.y / dataSum) * 100;
  return Highcharts.numberFormat(pcnt) + '%';
}

編集::

軸ラベル付きの更新された例：

http://jsfiddle.net/JVNjs/320/

[[コメントの編集

複数のシリーズのパーセント値をプロットしようとしている場合、さまざまな根本的な問題が発生します。

2つの異なるデータシリーズの％を計算し、未加工の値をプロットしているにもかかわらず％の値を表示している場合、ほとんどの場合、チャートは誤解を招き、混乱を招きます。

その場合、データをパーセント値として直接プロットするのが最善の方法です。生のデータ値をツールチップなどに表示したい場合は、ポイントオブジェクトに追加のプロパティとして追加できます（つまり- http://jsfiddle.net/JVNjs/735/ ）

2つの異なるシリーズで元のメソッドを使用する場合は、2つの異なる変数を作成して計算し、フォーマッターでシリーズ名を確認して、計算するデータの合計を決定します。

26
jlbriggs

@jlbriggsは素晴らしい答えを出し、このフォーマッター関数を作成する道へと私を導きました。この関数は常にデータのcurrent値をチェックします。データが後でプログラムによって更新される場合、パーセンテージは新しく更新されたデータを反映します。 .map().reduce()が自動的に処理するため、dataSumまたはループは必要ありません。

dataLabels: {
  enabled: true,
  formatter: function() {
    var pcnt = (this.y / this.series.data.map(p => p.y).reduce((a, b) => a + b, 0)) * 100;
    return Highcharts.numberFormat(pcnt) + '%';
  }
}
2
strikemike2k