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

Question

我正在使用highcharts创建列类型图表。 我的数据有两个维度，第二个维度显示第一个维度的严重性，范围从0到100。

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

我需要我的列高来显示数据的第一维，并根据严重性（第二维）来动态更改每列的颜色。类似于热图颜色，但是颜色是基于另一组数据来更改的。

任何建议我该怎么做？

预先感谢

Answer 1

我将展示一种我认为您可以适应的方法。让我们创建一个系列并为其设置默认颜色（我将其设置为严重性为零的颜色）：

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

要根据严重程度进行着色，我们需要一些值和一个函数来计算新颜色。我将假设您在图表外部将具有一系列严重性值，这些严重性值与序列点索引相对应。例如：

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

将calculateColor函数与输入颜色一起使用，严重性的最小值和最大值以及特定的严重性值现在应返回经过严重性调整的颜色。

为了演示，我们使用以下功能更新系列颜色：

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();

查看其中的this complete JSFiddle demonstration。

Answer 2

您可以通过'heatmap.js'模块中的 colorAxis 以简单的方式使用

：

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

实时演示：http://jsfiddle.net/BlackLabel/szv2g3u7/