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，它也是一个很是强大的图表库。你们若是在用这两个图表库中碰到什么问题，咱们能够一块儿探讨。