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它在行动。