highcharts：柱形图基于值的颜色变化

Question

I am creating a column type chart using highcharts. My data has two dimensions, the second dimension shows the severity of the first dimension and range from 0 to 100.

data:{(234,45),(55645,7),(964,97),...}

i need my column height to show the first dimension of data, and dinamically change the color of each column based on the severity(second dimension).something like heatmap color but the color change based on another sets of data.

Any suggestions how i can do this?

Thanks in Advance

Answer 1

I'll show an approach I think you can adapt. Lets create a series and set a default color for it (which I assume to be the color for zero severity):

series: [{
    color: '#ffff00', // yellow
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]

To color depending on severity, we need some values and a function to calculate the new color. I'm going to assume you'll have an array of the severity values outside the chart, which correspond to the series point indexes. For example:

severity = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110];
min = Math.min(...severity);
max = Math.max(...severity);
maxColor = new Highcharts.Color('#ff0000'); // red

calculateColor = function(inputColor, min, max, value) {
    color = new Highcharts.Color(inputColor);
    interval = max - min;
    adjustedValue = value - min;
    alpha = adjustedValue / interval;
    return color.tweenTo(maxColor, alpha);
}

Using the calculateColor function with an input color, the min and max of the severity along with the specific severity value should now return a severity-adjusted color.

To demonstrate, we update the series colors using this function:

for(i = 0; i < this.series[0].data.length; i++) {
    this.series[0].data[i].update({
        color: calculateColor(this.series[0].color, min, max, severity[i])
    }, false);
};

this.redraw();

See this complete JSFiddle demonstration of it in action.

Answer 2

In a simple way, you can use colorAxis from 'heatmap.js' module:

var columnProto = Highcharts.seriesTypes.column.prototype;

columnProto.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];
columnProto.optionalAxis = 'colorAxis';
columnProto.colorKey = 'y';

Highcharts.wrap(columnProto, 'translate', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    Highcharts.seriesTypes.heatmap.prototype.translateColors.call(this);
});

Highcharts.chart('container', {
    series: [{
        data: [1, 2, 3, 4, 5, 6],
        type: 'column'
    }],
    colorAxis: {
        minColor: '#c6e48b',
        maxColor: '#196127',
        min: 1,
        max: 6,
        gridLineWidth: 0
    }
});

Live demo: http://jsfiddle.net/BlackLabel/szv2g3u7/