highcharts：基于值的柱形图颜色更改

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

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

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

有什么建议吗

---

提前感谢

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

要根据严重程度设置颜色，我们需要一些值和一个函数来计算新颜色。我假设在图表之外有一个严重性值数组，它对应于系列点索引。例如：

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

for（i=0；i

---

查看它的运行情况。

通过一种简单的方式，您可以使用'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
    }
});

---

现场演示：

比我快，这里有一个非常类似的解决方案，它使用了来自@ewolden的颜色函数，并提供了一些替代方法，尽管

blendColors

很难理解：）整洁。猜测OP可能希望严重性不是

y

。像这样，

colorKey

可以处理额外的数据：。这太棒了：）

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