Javascript Highcharts柱形图颜色按单色显示，但亮度级别根据各自的柱值不同

我已经实现了

HighCharts Column Chart

，它的颜色是单一的蓝色。我想根据列的值给图表的每一列上色。例如，如果第一列的值为10，第二列的值为20，则两列的蓝色亮度应根据其值动态变化

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

感谢提供使用“区域”的建议，这为我的答案提供了基础

您只需将不同的颜色指定为您想要使用的任何颜色的不同“色调”，在本例中为蓝色。共有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
    }]
  });
});

.

感谢您提供了使用“区域”的建议，这为我的回答提供了基础

您只需将不同的颜色指定为您想要使用的任何颜色的不同“色调”，在本例中为蓝色。共有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
    }]
  });
});

---

.

颜色实际上没有“亮度”，它们只是不同的颜色。因此，使用相同的解决方案，但设置您想要的颜色（浅蓝色、中蓝色、深蓝色等）。此外，你应该在问题中包括你当前的代码，但值是动态的，有时是10有时是1000…那么如何应用条件？基于百分比。我尝试了百分比…将添加相同的代码…结果是相反的颜色没有真正的“亮度”，它们实际上只是不同的颜色。因此，使用相同的解决方案，但设置您想要的颜色（浅蓝色、中蓝色、深蓝色等）。此外，您应该在问题中包含您当前的代码，但值是动态的，有时是10有时是1000…如何应用条件？基于百分比。我尝试了百分比…将添加相同的代码…结果是相反的方式似乎答案是我想要的…尝试这似乎答案是我想要的…尝试这