highcharts分段显示不同颜色

最近在做统计图的时候,碰到一个需求 类似如下:

就是在红色虚线框内的折线在不同区域用不同的颜色表示,并且是虚线。

开始定位为用highcharts库实现。确定用这个库后,开始在网上查资料,发现有类似的例子,网址是:http://code.hcharts.cn/hcharts.cn/hhhhco

 1 $(function () {
 2     $('#container').highcharts({
 3         series: [{
 4             data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
 5             zones: [{
 6                     value: 0,
 7                     color: '#f7a35c',
 8                     dashStyle: 'dot'
 9                 }, {
10                     value: 10,
11                     color: '#7cb5ec'
12                 },{
13                     color: '#90ed7d'
14                 },
15             ]
16         }]
17     });
18 });
highcharts demo

效果图如下:

发现它使根据y轴的value值来分段展示的,虽然不符合我的要求,但是从中可以看到2点提示:

1. 分段显示可以根据series 中的zones 来实现;

2. 虚线可以用dashStyle: 'dot' 来实现;

 要想看这个库能否实现我们的需求,最好的办法是查它的API。功夫不负有心人,我在API中找到实现方法。

在 plotOptions.series.zoneAxis 中可以选定使根据x的value还是y得value 来分段,默认是y轴的value,然后我们在series中设置zones就可以了。

 具体网址 http://api.highcharts.com/highcharts#plotOptions.series.zones

最近在做报表中几乎翻遍了highcharts 的API,发现了它的强大,也解决了很多奇葩问题,另外也研究了另一个javascript图表插件echarts,它也是一个非常强大的图表库。大家如果在用这两个图表库中碰到什么问题,我们可以一起探讨。

 

转载于:https://www.cnblogs.com/peterli2013/p/5046788.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值