highcharts分段顯示不同顏色

最近在做統計圖的時候，碰到一個需求 類似如下：

就是在紅色虛線框內的折線在不同區域用不同的顏色表示，並且是虛線。

開始定位為用highcharts庫實現。確定用這個庫后，開始在網上查資料，發現有類似的例子，網址是：http://code.hcharts.cn/hcharts.cn/hhhhco

$(function () {
    $('#container').highcharts({
        series: [{
            data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
            zones: [{
                    value: 0,
                    color: '#f7a35c',
                    dashStyle: 'dot'
                }, {
                    value: 10,
                    color: '#7cb5ec'
                },{
                    color: '#90ed7d'
                },
            ]
        }]
    });
});

效果圖如下：

發現它使根據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，它也是一個非常強大的圖表庫。大家如果在用這兩個圖表庫中碰到什么問題，我們可以一起探討。