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'
        }]
 
    });
});
图形:

highcharts多个Y轴的更多相关文章

  1. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  2. HighCharts实现双Y轴

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...

  3. Highcharts 多个Y轴动态刷新数据

    效果图: js代码: $(function() { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: f ...

  4. Highcharts 丢失值区域图;Highcharts 反转x轴与y轴;Highcharts 曲线区域图;Highcharts 区间区域图;Highcharts 使用区间和线的区域图

    Highcharts 丢失值区域图 chart 配置 将 chart 的 spacingBottom 属性设置为 30.表示图表间的间隔区间. var chart = { type: 'area', ...

  5. 统制Highcharts中x轴和y轴坐标值的密度

    统制Highcharts中x轴和y轴坐标值的密度 www.MyException.Cn 发布于:2012-06-26 10:04:13 浏览:688次 1 控制Highcharts中x轴和y轴坐标值的 ...

  6. highcharts 不显示X轴 Y轴 刻度

    xAxis: { tickWidth:0,        //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0,        //设置坐标宽度 la ...

  7. highcharts设置Y轴范围及根据Y轴范围设置不同颜色

    yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...

  8. 改变highCharts的X轴和Y轴的数据刻度

    xAxis:{ tickPixelInterval:10 //自行调整X轴刻度的间距}, yAxis:{ lineWidth:1, //Y轴默认不显示Y轴线,添加一个轴线的宽度就可以显示出来 tick ...

  9. highcharts.js的时间轴折线图

    工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...

随机推荐

  1. toFixed四舍五入精度校正

    var a = 2.255; var b = a.toFixed(2); console.log(b); 以上代码,按预期正常四舍五入得到结果应该是2.26,但实际返回值为2.25 js浮点数精度作为 ...

  2. zepto.js不支持scrollTop的解决办法

    zepto.js不支持animate({ scrollTop: 100},1000); 可以在移动端使用原生window.scrollTop(x,y);简便

  3. 《python源代码剖析》笔记 python环境初始化

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zhsenl/article/details/33747209 本文为senlie原创.转载请保留此地 ...

  4. python变量的引用,浅拷贝

    python的变量是对象引用 l1和l2引用的相同的对象,所以会相互影响 元组不变的是引用的物理地址,如果引用的对象是可变的,那么远祖也会发生变化 但是t1[2]的id时钟没有发生变化 2 默认是浅拷 ...

  5. Python2.7-canlendar

    calendar模块的主要功能是针对万年历.星期几的,此外模块内还有方便的判断闰年.获取月份名.星期名的方法 1.模块的类 1.1.calendar.Calendar([firstweekday]) ...

  6. Android动态的全屏和退出全屏

    转自:http://chroya.iteye.com/blog/974031 让程序全屏的方法,大家都知道,那是静态的,程序运行之初就申明了.但是如果有这样的需求:要在程序运行的过程中,执行了某个操作 ...

  7. zabbix items 配置

    item是什么?它是我们对于host监控的基本条目,它属于不同的applications中,item的设置既可以针对具体的某个host主机,也可以针对模板进行设定(可以在多个主机进行复用). item ...

  8. “System.Reflection.AmbiguousMatchException”类型的异常在 mscorlib.dll 中发生

    错误提示: “System.Reflection.AmbiguousMatchException”类型的异常在 mscorlib.dll 中发生,但未在用户代码中进行处理. 发现不明确的匹配. 问题原 ...

  9. Linux常用系统信息查看命令

    [转]http://yulans.cn/linux/linux%E5%B8%B8%E7%94%A8%E7%B3%BB%E7%BB%9F%E4%BF%A1%E6%81%AF%E6%9F%A5%E7%9C ...

  10. timestamp 字段

    项目中由于需求设计,数据库中需要一个timestamp时间戳类型的字段来作为区别数据添加和修改的标识.由于timestamp在SQL SERVER 2005数据库中,不可为空的timestamp类型在 ...