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. 开源作业调度框架 - Quartz.NET - Cron表达式测试

    昨天简单写了一下如何使用Quzrtz.NET. 那么问题来了,我设置了Cron表达式之后如何知道是表达式是否按照预期的时间执行了呢? 我找到了些Cron表达式工具生成了表达式,确发现它们基本上没有进行 ...

  2. 题解 P1378 【油滴扩展】

    题面 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完毕才能放置下一个油滴.那么 ...

  3. 使用PhotoShop将视频转为gif格式

    由于文档中不方便上传视频,尤其是一些短视频,将其制作成gif格式更便于浏览,刚好PhotoShop中有这种功能,笔者在这里分享一下. 在PS中打开需要转换格式的视频文件,选择文件选项导出中的导出为We ...

  4. M100(3) 无线数传

    本文记录了无线数传配合地面Windos qt写的飞机控制SDK软件的使用过程 使用了两种类型无线数传 遇到问题 1 界面卡死问题 1.1 数传问题 问题描述: 使用非官方数传,点击active按键和一 ...

  5. 网络侦查与网络扫描-P201421410029

    中国人民公安大学 Chinese people’ public security university 网络对抗技术 实验报告   实验一 网络侦查与网络扫描     学生姓名 李政浩 年级 2014 ...

  6. VC++ MFC单文档应用程序SDI下调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错原因分析及解决办法:glewInit()初始化的错误

    1.问题症状 在VC++环境下,利用MFC单文档应用程序SDI下开发OpenGL程序,当调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错,出错代码如下: OpenG ...

  7. Blog Contents

    This page is intently left for contents catalog of my articles. |----------------------------------- ...

  8. P1649 [USACO07OCT]障碍路线Obstacle Course

    题目描述 Consider an N x N (1 <= N <= 100) square field composed of 1 by 1 tiles. Some of these ti ...

  9. Android开发环境的发展以及重装系统之后在myeclipse重配Android开发环境。

    android的开发环境早期要自己去去官网下SDK,ADT,AVD等.不仅在一开始要面临国内防火墙的阻拦,四处奔波之后都下载好了,还得自己Linked,可谓困难重重.随着android开发的火热,上面 ...

  10. sql 两表更新

    UPDATE sale_origin_line set  state='cancel'  from  sale_origin p,sale_origin_line q  where p.id=q.or ...