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. 1 什么是virtual Machine

    1.所有的虚拟机以文件的形式存放在存储上. 2.虚拟机的文件构成: swap files: <vm_name>.vswp  虚拟机的内存文件,vmx-<vm_name>.vsw ...

  2. mysql-client 与mysql-server的区别

    mysql-server 与 mysql-client是DBMS的两个面向不同操作对象的工具. server是DBMS面向物理层次,包含存储数据的一系列机制.处理方法的集成: client是DBMS面 ...

  3. gl 绘制多边形的函数解析 分类: OpenGL(转)

    http://blog.csdn.net/zhongjling/article/details/7528091 1,所谓正反面 glFrontFace(GL_CCW);  // 设置CCW方向为“正面 ...

  4. 第 13 章 文件输入/输出 (标准I/O)

    /*-------------------------- count.c -- 使用标准 I/O --------------------------*/ #include <stdio.h&g ...

  5. SmartUpload相关类的说明

    ㈠ File类 这个类包装了一个上传文件的所有信息.通过它,可以得到上传文件的文件名.文件大小.扩展名.文件数据等信息. File类主要提供以下方法: 1.saveAs作用:将文件换名另存. 原型: ...

  6. Django商城项目笔记No.6用户部分-注册接口-短信验证码实现celery异步

    Django商城项目笔记No.4用户部分-注册接口-短信验证码实现celery异步 接上一篇,如何解决前后端请求跨域问题? 首先想一下,为什么图片验证码请求的也是后端的api.meiduo.site: ...

  7. 借助强大的IDEA开发ide高效实现equals,hashcode以及toString方法

    IDEA工具提供多种生成hashCode与equals的代码方案,注意:尽量不要使用第一个方案,第一个方案对于null不做判空处理,容易NNP问题. 对于生成toString方法方案,默认使用的是+拼 ...

  8. php header函数导出excel表格

    推荐一个除了用PHPExcel导出表格之外的另外一种比较简单不需要引入类文件的表格导入方法——header()导出excel表格. 导出表格的步骤封装成了方法,以便于重复使用,代码如下: /** * ...

  9. 有crontab中的脚本不执行,需要在脚本里面export各种环境变量

    [oracle@sta ~]$ vi .bash_profile # .bash_profile # Get the aliases and functionsif [ -f ~/.bashrc ]; ...

  10. 使用filter对请求设置编码

    一.复习 加强方法: 1)继承 2)装饰模式 3)动态代理. 使用装饰模式: 1)要求装饰者和被装饰者实现同一个接口或者继承同一个类. 2)装饰者要求被装饰者的引用. 3)对于要加强的方法进行加强,对 ...