如何为Highcharts柱状图设置基于数值的特殊渐变效果？

问题核心是当前为整个系列设置了统一渐变，导致所有柱子都显示完整的红-绿渐变。要实现根据数值调整渐变区域，需要为每个数据点单独生成对应数值的渐变配置。

实现步骤 #

1. 编写一个生成渐变的工具函数，根据数值和y轴最大值计算渐变分界点，让柱子仅显示对应数值的颜色区域。
2. 将原数据数组转换为包含y值和color属性的对象数组，为每个点分配专属渐变。

修改后的完整代码 #

JavaScript代码

$(function() {
  // 根据数值生成对应渐变配置
  function createColumnGradient(value, maxValue) {
    const ratio = (maxValue - value) / maxValue;
    return {
      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
      stops: [
        [0, 'red'],
        [ratio, 'red'],
        [ratio, 'green'],
        [1, 'green']
      ]
    };
  }

  const maxYValue = 100;
  const dataValues = [30, 50, 100];

  $('#container').highcharts({
    chart: {
      type: 'column',
      spacingBottom: 0,
      spacingTop: 0,
      spacingLeft: 0,
      spacingRight: 0,
      events: {
        load: function() {
          this.xAxis[0].setExtremes(0, 5);
        }
      }
    },
    title: { text: '' },
    subtitle: { text: '' },
    xAxis: {
      categories: ['S1', 'S2', 'S3'],
      crosshair: false,
      gridLineWidth: 0,
      tickWidth: 0
    },
    yAxis: {
      min: 0,
      max: maxYValue,
      title: { text: '' },
      labels: { enabled: false },
      gridLineWidth: 0
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },
    series: [{
      name: 'S1',
      data: dataValues.map(value => ({
        y: value,
        color: createColumnGradient(value, maxYValue)
      }))
    }]
  });
});

HTML代码

<script src='https://code.jquery.com/jquery-3.6.1.js' integrity='sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=' crossorigin='anonymous'></script>
<script src='https://code.highcharts.com/highcharts.js'></script>
<script src='https://code.highcharts.com/modules/exporting.js'></script>

<div id='container'></div>

效果说明 #

• 数值30的柱子：仅显示绿色区域，因为柱子高度对应渐变的绿色段。
• 数值50的柱子：显示从红色（顶部）到绿色（底部）的渐变效果，对应数值在中间区间。
• 数值100的柱子：显示全红色，因为柱子填满整个y轴，对应渐变的红色段。

内容的提问来源于stack exchange，提问作者morteza mortezaie