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，它也是一個很是強大的圖表庫。你們若是在用這兩個圖表庫中碰到什麼問題，咱們能夠一塊兒探討。