Highcharts根據值動態更改條的顏色

Question

我正在使用json數據創建列類型圖。這裏是我調用的使用Ajax調用獲取數據的JS函數並繪製圖表。

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}] 

任何建議我怎麼能做到這一點？

Answer 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 
     }] 
    } 
} 

Answer 2

在解析器可以替換的是：

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

與

$.each(response, function(i, item) { 
    categorySeries.push(response[i].dateVal); 
    if(response[i].count >= 10) { 
     dataSeries.push({ 
     y: response[i].count, 
     color: 'red' 
     }); 
    } 
    else { 
     dataSeries.push(response[i].count); 
    } 
}); 

或使用zones。