highcharts柱狀圖含有正負柱設置不同顏色的方法

最近做移動端的數據圖，需要設置正負兩種柱子，以及正負兩種柱子顯示不同的顏色，查看API，無奈API太龐大了，求問谷歌，偉大的谷歌給我了正確的答案

 

I have a working chart with negative values. I would like to have columns with positive values to be blue and columsn with negative vlaues to be red.

Here is what I have:

翻譯：我有一個負的值的工作表。我想有柱的正面價值觀是藍色和columsn負值是。

這里是我的：

代碼就不貼了

 

下面是答案：

Since you are not describing how you are populating modafor your data series here are some generalities:

• The series.data.color item is accessible. So, when building the series.data up you could calculate what color it should be based on the value.
• You are only allowing one color in your list: colors: [ 'blue' ],
• Another option is to set the negativeColor.

既然你不能描述你是如何填充moda你的數據系列，這里有一些共性：

• 的series.data.color項目可。所以，當建築series.data你能計算出它應該基於價值什么顏色。
• 你是只允許在您的名單中，一種顏色：colors: [ 'blue' ],
• 另一個選項是設置negativeColor。

引用地址：http://4byte.cn/question/258586/highcharts-column-with-negative-values-column-color.html

API地址：http://www.hcharts.cn/api/index.php#plotOptions.column.negativeColor

demo地址：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/arearange-negativecolor/

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-negative-color/

 

//日收益率
    (function () {
        if($("#everyday_charts").length==0){
            return false;
        }
        $('#everyday_charts').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: null
            },
            xAxis: {
                categories: ['09-14', '09-15', '09-16', '09-17', '09-18', '09-19', '09-20', '09-21', '09-22', '09-23', '09-24', '09-25','09-26', '09-27', '09-28', '09-29', '09-30','10-01','10-02','10-03','10-04','10-05','10-06','10-07','10-08','10-09','10-10','10-11','10-12','10-13','10-14'],
                labels: {
                    step: 5 //設置X軸間隔多少顯示
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                color:'#ff2c55',
                negativeColor: '#00ce9b',//就是這個屬性設置負值的顏色
                data: [15,12,-10,15,12,15,12,-10,20,12,-5,-10,20,12,-5,20,15,12,-10,20,12,-5,15,-5,12,-5,15,12,12,-5]
            }],
            credits: {
                enabled: false
            },
            legend:{
                enabled: false
            },
            credits:{//版權信息
                enabled:false
            },
            tooltip:{//數據點提示框
                enabled:false
            }
        });

    })();