highcharts如何在一个图表中使多条曲线在不同刻度下显示

问题:不同的曲线显示在同一种Y轴刻度下,因数据范围的差别,显示的曲线对数据的刻画明显程度便差别很大,一些数据范围小的曲线几乎成为一条直线,不能很清晰地反映出数据的变化趋势。如图所示:

这里写图片描述

查了很多资料,也看了highcharts的API,依然没有头绪,在甫文兄的帮助下完美地解决了这个问题。

解决方法:在yAxis下设置数组,

yAxis: [{
            title: {
                text: null
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            labels: {
                enabled:false
            }
        },
        {
            title: {
                text: null
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            labels: {
                enabled:false
            }
        },
        {
            title: {
                text: null
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            labels: {
                enabled:false
            }
        },
        {
            title: {
                text: null
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            labels: {
                enabled:false
            }
        }
        ]

然后在具体要显示的数据下引用这些yAxis即可:yAxis:0、yAxis:1、yAxis:3…

series: [{
            name: '点击量',
            data: [376, 334, 313, 371, 412, 361, 318],
            yAxis:0
        }, {
            name: '平均点击花费',
            data: [1.08, 1.04, 1.07, 0.97, 0.97, 0.97, 0.98],
            yAxis:1
        }, {
            name: '花费',
            data: [407.6, 346.71,334.91,360.65, 401.6, 348.6, 311.03],
            yAxis:2
        }, {
            name: '投入产出比',
            data: [0, 0, 0, 0, 1.22, 1.06, 0],
            yAxis:3
        }]

如此就能生成刻画明显的曲线了:

这里写图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值