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
            }
        });

    })();