highcharts多个Y轴

多个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'
        }]

    });
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

larance

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值