Highcharts dynamically change bar color based on value

问题:

I am creating a column type graph using json data. Here is the JS function i call to get the data using ajax call and plot the chart.

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

I want to be able to modify the color of bar for any day if the count is greater than a particular value, say 10.

This is how the json input to the function.

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

Any suggestions how i can do this?

回答1:

You can use color zones (API) to have different colors based on the value of a column.

An example with values below/above the value 10 having different colors (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         }]     } } 

回答2:

In the parser you can replace that:

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

with

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

or use zones.

文章来源: Highcharts dynamically change bar color based on value