javascript - Highcharts 柱形图颜色由单一颜色但根据各自的列值具有不同的亮度级别

Question

我已经实现了 HighCharts Column Chart，它由单一的蓝色着色。我想根据列的值为图表的每一列着色。例如，如果第一列有 10 个值，第二列有 20 个值，那么两列的蓝色亮度应该根据它们的值动态变化。

我发现了一些解决方案，它们根据条件用不同的颜色为 a 列着色。但我想改变颜色的亮度级别。颜色值将是任何单个值。

Answer 1

归功于 this answer提供使用“区域”的建议，这为我的回答提供了基础。

您可以将不同的颜色指定为您想要使用的任何颜色的不同“阴影”，在本例中为蓝色。有 4 个区域，每个区域都有不同类型的蓝色。

为了处理动态数据(即您不知道值范围)，您可以根据输入数据数组中最大值的百分比来计算区域范围。在这种情况下，4 个区域定义为 25%、50%、75% 和 100%。

var d = [7.0, 6.9, 9.5, 10.0, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6];
var max = Math.max.apply(Math, d);

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    plotOptions: {
      column: {
        zones: [{
          value: max * 0.25,
          color: '#aaf'
        }, {
          value: max * 0.5,
          color: '#88f'
        }, {
          value: max * 0.75,
          color: '#66f'
        }, {
          color: '#44f'
        }]
      }
    },
    series: [{
      data: d
    }]
  });
});

Here is a working example .