高图更改条形颜色基于数据的前三个最高和最低值

时间:2015-11-15 09:21:15

标签: javascript highcharts

我在我的项目中使用Highcharts,当我想要应用一个要求我将动态颜色动态更改为绿色,黄色和红色的要求时,我会遇到困难。绿色用于为属于前三个最高数字的值数据着色。红色用于为属于数据底部三个数字的值数据着色。另一个值变黄。

这是我在JS中的Highcharts代码:

$(function(){
    $('#directorate-culture-index-comparison-chart').highcharts({
        chart:{
            type: 'bar'
        },
        title : {
            text : ''
        },
        legend :{
            enabled : false
        },
        xAxis: {
            categories : [dir1, dir2, dir3,dir4 , dir5,dir6,dir7]

        },
        plotOptions :{
            series : {
                colorByPoint : true,
                dataLabels : {
                    enabled : true,
                    align : 'right',
                    color : "#fff"
                }
            }
        },
        yAxis : {
            title : {
                text: "Score"
            },
            plotLines: [{
                color: 'red',
                value:  val_culture_index, // Insert your average here
                label : {
                    text: val_culture_index,
                    style: {
                        color: 'blue',
                        fontWeight: 'bold',
                        fontSize : 18
                    }
                },
                width: '1',
                zIndex: 100 // To not get stuck below the regular plot lines
            }],
            min : 0,
            max : 5
        },
        credits:{
            enabled : false
        },
        series : [{
            data : [val_culture_index_JKTDC, val_culture_index_JKTDE, val_culture_index_JKTDF, val_culture_index_JKTDI, val_culture_index_JKTDN,val_culture_index_JKTDO,val_culture_index_JKTDZ]
        }],
    });
});

0 个答案:

没有答案