Question

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

我找到了一些解决方案，这些解决方案根据条件通过不同的颜色着色到列a。但我想改变颜色的亮度等级。颜色值将是任何单个值。

Answer 1

感谢this answer提供使用＆＃39;区域的建议＆＃39;这为我的答案提供了基础。

您可以将不同的颜色指定为不同的颜色＆＃39;您想要使用的任何颜色，在这种情况下为蓝色。有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

Highcharts柱状图颜色为单色，但根据各自的列值具有不同的亮度级别

1 个答案: