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

Question

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

我发现了一些解决方案，这些解决方案是通过条件按不同颜色对列进行着色。但我想改变颜色的亮度等级。颜色值将是任何单个值。

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。