高图根据值动态更改条形颜色

一尘不染

高图根据值动态更改条形颜色

json

我正在使用json数据创建列类型图。这是我调用的JS函数，用于使用ajax调用获取数据并绘制图表。

function getChart(){
    var categorySeries = [];
    var dataSeries = [];            
    var url = "CallToControllerURL";

    $.getJSON(url, function(response) {             
        $.each(response, function(i, item) {
            categorySeries .push(response[i].dateVal);                  
            dataSeries.push(response[i].count);             
        });

        $('#chartDiv').highcharts({
            chart : {type : 'column'},
            title : {text : 'Date vs Count'},
            xAxis : {categories : categorySeries, crosshair : true},
            yAxis : {allowDecimals: false, min : 0, title : { text : 'Count'}},
            plotOptions : { column : {  pointPadding : 0.2, borderWidth : 0,    allowPointSelect: true  } },
            series : [ {name : 'Nbr of Records',data : dataSeries } ]
        });             
    });
}

如果计数大于特定值（例如10），我希望能够在一天中修改条形的颜色。

这就是json输入到函数的方式。

[{"id":3,"dateVal":"2015-11-12","count":6},{"id":2,"dateVal":"2015-11-11","count":8},{"id":1,"dateVal":"2015-11-10","count":5}]

任何建议我该怎么做？

阅读 220

2020-07-27

共1个答案

一尘不染

您可以使用颜色区域（API）根据列的值来具有不同的颜色。

值低于/高于10的示例具有不同的颜色（JSFiddle）：

plotOptions: {
    column: {
        zones: [{
            value: 10, // Values up to 10 (not including) ...
            color: 'blue' // ... have the color blue.
        },{
            color: 'red' // Values from 10 (including) and up have the color red
        }]
    }
}

2020-07-27