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

1 回答

• 4

  感谢this answer提供使用'zones'的建议，这为我的答案提供了基础 .

  您可以将不同的颜色指定为您想要使用的任何颜色的不同“阴影”，在本例中为蓝色 . 有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 .

  回复于 2024-04-27T10:55:17+08:00