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. fedora27安装谷歌浏览器Chrome

    安装 添加chrome源 #cd /etc/yum.repos.d #wget http://repo.fdzh.org/chrome/google-chrome-mirrors.repo 安装Chr ...

  2. 记一次隐秘的XSS漏洞挖掘

    前言 在为某客户网站做渗透测试时发现一个有趣的事情.当我访问该网站的某条链接时服务器返回的是404页面.看到这里我当时就下意识的忽略它,但是后来又想了想这也不是完全没有价值,毕竟中间件及其版本都出来了 ...

  3. 当DATABASE进入了suspect模式以后

    一个VM的错误就造成了sql2012的脱序.很多一般看不到的模式陆续登场 诸如 recovery pending, suspect, EMERGENCY. 以下脚本可以帮助恢复,如果文件没有损坏的话. ...

  4. [eclipse]添加python默认模板,在首行添加编码方式(# -*- coding: utf-8 -*-)

    1.从eclipse的windows->preference 2.参照如下图,添加指定的utf-8编码方式

  5. centos7装机教程

    U盘启动电脑进入安装界面 正常情况下你应该会看到下面的这个界面: 选择第一项,然后按TAB键,然后会看到下面这个: 3.修改第二步中按TAB键出来的命令 将命令修改为:>vmlinuz init ...

  6. MySql详解(二)

    MySql的安装和使用安装过程可以自行百度,非常简单,一直下一步就行,这里省略. 启动和停止MySql服务:• 方式一:通过计算机管理方式右击计算机—管理—服务—启动或停止MySQL服务• 方式二:通 ...

  7. html5式程序员表白

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/whqet/article/details/26394493 前端开发whqet,csdn,王海庆,w ...

  8. windows下mysql和linux下mysql主从配置

    1. linux下mysql安装版本5.6   windows下mysql版本5.7  不要问我为什么版本不一致  就是想这么搞 2. linux为主服务器   windows为从服务器 3.找到li ...

  9. 有意思的flex 色子布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. C#中使用WeiFenLuo.WinFormsUI.Docking.dll实现窗口停靠效果

    很酷的效果,很值得好好去学习的哈. 重置工具箱: 新建一个WinForm程序,项目名称为TestDockPanelControl.选中Form1窗体后选择工具箱--->>新建个添加选项卡命 ...