highcharts多個Y軸

http://blog.sina.com.cn/s/blog_6a53599101019qax.html

 

 

多個Y軸的實現方法在於把yAxis設置成一個數組，裏面的一個對象表明一條Y軸，利用opposite:true來表示是否跟默認位置相反，默認Y軸的位置在圖形左邊，series中經過對每一個series設置yAxis來表示使用哪一個Y軸，0表示第一個，以此類推。

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

畫圖：

$(function () {

    $('#container').highcharts({

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        yAxis:[{

            lineWidth : 1,

            title:{

                text :'y1'

            }

        },{

         title:{

                text :'y2'

            },

            lineWidth : 1,

            opposite:true

        },{

         title:{

                text :'y3'

            },

                  lineWidth : 1,

            opposite:true

        }],

        series: [{

            data: [1,2,3,4,5,6,7,8,9],

            name: 'Right',

            yAxis:0

        }, {

            data: [4,1,5,8,7,10,13,11,11],

            yAxis:1,

            name: 'Center'

        }, {

            data: [9,10,11,12,13,14,15,16,17],

            step: 'left',

            yAxis:2,

            name: 'Left'

        }]

 

    });

});

圖形：