如何用HighCharts实现单系列柱状图的分段颜色渲染？

可以实现，核心思路是将单个柱子拆分为多个对应颜色区间的堆叠系列，通过堆叠柱状图的方式让不同区间段显示不同颜色。具体步骤如下：

1. 拆分原始数据到对应区间 #

先把每个数据点按你的区间规则（0-100绿、101-120黄、121+红）拆分成三个部分，每个部分对应一个系列的数值：

// 示例原始数据
const seriesData = [80, 110, 130, 95, 125];

// 拆分绿色区间（0-100）数据
const greenData = seriesData.map(val => Math.min(val, 100));
// 拆分黄色区间（101-120）数据
const yellowData = seriesData.map(val => {
  const remaining = val - 100;
  return remaining > 0 ? Math.min(remaining, 20) : 0;
});
// 拆分红色区间（121及以上）数据
const redData = seriesData.map(val => {
  const remaining = val - 120;
  return remaining > 0 ? remaining : 0;
});

2. 配置堆叠柱状图 #

创建三个系列，开启堆叠模式，每个系列对应一个颜色区间，并设置对应颜色：

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    // 根据你的实际需求设置分类
    categories: ['项目1', '项目2', '项目3', '项目4', '项目5']
  },
  yAxis: {
    min: 0,
    title: {
      text: '数值'
    },
    // 可选：显示柱子的总数值
    stackLabels: {
      enabled: true,
      format: '{total}'
    }
  },
  plotOptions: {
    column: {
      // 开启堆叠模式
      stacking: 'normal',
      borderWidth: 0
    }
  },
  series: [
    {
      name: '0-100',
      data: greenData,
      color: '#1D681B',
      // 可选：隐藏图例（如果不需要区分区间图例）
      showInLegend: false
    },
    {
      name: '101-120',
      data: yellowData,
      color: '#ECC518',
      showInLegend: false
    },
    {
      name: '121+',
      data: redData,
      color: '#D50D0D',
      showInLegend: false
    }
  ]
});

原理说明 #

• 堆叠柱状图会将同一x轴位置的多个系列柱子垂直堆叠，形成一个完整的柱子，每个堆叠段的颜色由对应系列的color属性控制。
• 通过数据拆分，确保每个系列只包含对应区间的数值，最终呈现出单柱子分段着色的效果。

内容的提问来源于stack exchange，提问作者Ken Hadden