HighCharts のグループ化された棒グラフの個々の棒に軸ラベルを提供するプログラムによる方法はありますか?
ユースケース:ユースケースは、グループ化され積み上げられたグラフを扱う場合です。これらのグラフでは、個別のラベルがない限り、個々のバーが何を表しているかを (ツールチップなしで) 視覚的に伝えるのは困難です。
デフォルトの動作: 例として、積み上げおよびグループ化された縦棒グラフの HC デモを参照してください。最初は、各クラスターの個々のバーが異なる性別を表していることが不明確な場合があります: http://www.highcharts.com/demo/column-積み重ねてグループ化
目標:これは、私が達成しようとしていることの図です。2番目のx軸など、プログラムでこれを行うことは可能ですか? おそらく別のアイデアは、スタック合計の巧妙な配置を使用することですが、もちろんそれは実際のスタック合計を表示する邪魔になります。
役立つオプションがいくつかあります。
まず、stackLabels フォーマッターを使用すると、ラベルの内容を判別できます。
次に、veticalAlign:"bottom" を使用すると、ラベルをスタックの一番下に配置できます。
第 3 に、'y' オプションを使用すると、ラベルをデフォルトの位置から相対的に移動できます。
問題は、チャート プロット エリアの外にラベルを移動できないように見えることです。これを回避する 1 つの方法は、負の値で y 軸を開始して、ラベル用のスペースを確保することです。次に、x 軸の位置をグラフ領域に移動できます。
xAxis: {
offset:-43,
labels:{
y:40
},
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
stackLabels: {
verticalAlign:"bottom",
y:20,
enabled: true,
formatter: function() {
return this.stack;
}
}
残っている唯一のことは、誤った '-2' y 軸ポイントを削除しようとすることです。
-編集- startOnTick を false に設定し、y 軸の最小値を -1.9 にすると、偽の -2 ポイントがなくなります。
min: -1.9,
startOnTick:false,
画像とまったく同じ結果ではありませんが、次のように表示されますstackLabels。
yAxis: {
...
stackLabels: {
enabled: true,
formatter: function() {
return this.stack;
}
}
},
列の上部にラベルを表示します。
グループ化カテゴリプラグインを使用できます。