【highcharts】 複数軸を設定したときに目盛線を共有しない方法

highchartsで設定されているオプションを見ていきます。

基本的には、Highcharts API Referenceの中から私が使えそうだと思ったものを取り上げていきますので、詳細だったり他の機能も見てみたい方はリンク元を参照してください。

■alignTicks:
複数の軸を設定したときに右軸と左軸とで目盛線を共有したくない場合にalignTickを使います。
文だと何を言っているのか解らないと思うので、実際にグラフを見てみましょう。

デフォルトでは、alignTicksはtrue(有効)になっているので何も設定しないと以下のグラフになります。
通常私達が使っているのがこれになります。

Highcharts Example


次に、alignTicksをfalse(無効)に設定するとこのようになります。
グラフの数値は変更していません。

Highcharts Example


これはalignTicksをfalseにしたもののソースの一部を書きだしたものです。
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container-pra2',
            alignTicks: false,
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: 'Primary Axis'
            }
        }, {
            title: {
                text: 'Secondary Axis'
            },
            gridLineWidth: 0,
            opposite: true
        }],


右軸に注目してみてください。alignTicksをfalseにしたことで、右軸の値が左軸基準の目盛線の上に乗っていないことが解ると思います。この機能を使うと、2つのデータがそれぞれ上限下端の範囲を目いっぱい使うことが出来るのでダイナミックなグラフを描写することができます。先ほど示した2つのグラフを見ると、下のグラフの方が折れ線グラフの傾きが大きくなっている事がわかると思います(line1)。
注意点として、右軸の設定時にgridLineWidthを0にしないと、右軸に合わせた目盛線も表示されてしまうので見にくい図になってしまいます(下のグラフ参照)。なので、gridLineWidthを0に設定しましょう。もちろん左軸の方を0にしても構いません。


Highcharts Example


関連記事
  
このエントリーをはてなブックマークに追加

お気に入りサイト

■よく読まれている人気記事


コメントの投稿

非公開コメント

Index for HighCharts FreQuent
author imageAuthor:Lynx
データをグラフ化&推移を見守り中。
御連絡はこちらまでお願い致します。



最新記事