HighCharts を使用して積み上げパーセント横棒グラフをレンダリングしていますが、HighCharts がデフォルトで系列データの順序を逆にすることを除けば、うまく機能します。
デモでわかるように、$20,000 は data1/data2 配列の最初の行ですが、各バーの最後のチャンクです (ずっと右側)。これを整理したいので、いくつかのことを試しました。
1) 配列.reverse()d を使用してチャートをレンダリングします。上記のデモでこれらの行を有効にすると、各グラフに異なる数のレコードがあるため、その結果、色が整列しないことがわかります。これを行う方法、私は確信しています）
2) を使用しxAxis.reversed = trueます。これにより、色が一致する正しい順序になりますが、凡例が逆になり (100% から 0%)、右から左にアニメーション化されます。
これを回避する別の方法はありますか？
まあ、代替手段がないと仮定すると、Googleを通じて誰かがこれに出くわした場合に備えて、私が行ったのは次のとおりです。
上記のオプション 2 (軸を逆にする) を使用して、単純にフォーマッタを介してラベルを逆に変更しました。
私の場合、パーセンテージ (0-100) であるため、単純に次のように入力します。
labels: { formatter: function() { return Math.abs(this.value - 100) } }
積み上げグラフの場合、デフォルトで true に設定される reverseStacks ( http://api.highcharts.com/highcharts#yAxis.reversedStacks ) というオプションがあるようです。コードでこれを false に設定したい場合があります。
JSFiddle が Highcharts バージョン 2.3.5 を具体的に要求していることに気付きましたが、このオプションはおそらく存在しません。