【highcharts】 X軸を縦軸にY軸を横軸に入れ替える

今回はX軸とY軸の縦軸横軸を入れ替える方法を紹介します。
詳しくは、Highcharts API Referenceをご覧ください。

方法は簡単で以下の記述をchart:{ }のセクションに加えるだけです。
 
inverted: true


まずこちらがinverted: trueを加える前のグラフです。
デフォルトではX軸が横軸、Y軸が縦軸に設定されています(デフォルトではinvertedはfalse)。

Highcharts Example


そして、このグラフがinverted: tureを加えたグラフになります。

Highcharts Example


ソースコード
 

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container-pra1.7',
            inverted: true,
            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'
            },
            opposite: true
        }],
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: true,
            align: 'left',
            x: 100,
            verticalAlign: 'top',
            y: 70
        },
        tooltip: {
            formatter: function() {
                return ''+ this.series.name +'
'+ this.x +': '+ this.y; } }, plotOptions: { series: { animation: { duration: 5000 } } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4], yAxis: 1 }] }); });
縦軸の目盛の位置を逆(左から右へ)にするには、xAxis部分に"opposite: true"を加えればOKです。

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

お気に入りサイト

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


コメントの投稿

非公開コメント

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



最新記事