如何基于第三个字段修改Highcharts柱状图的柱子颜色

可以通过以下两种常用方式实现需求，按需选择即可：

方案1：数据预处理（推荐，性能最优） #

在将原始数据传入Highcharts配置前，遍历数据直接将z字段值赋值给数据项的color属性，Highcharts会直接识别该属性作为柱子颜色：

// 你的原始数据
const rawData = [
  { x: 1, y: 1.21, z: "blue" },
  { x: 2, y: 1.13, z: "green" },
  // 其他数据项
];

// 预处理数据
const processedData = rawData.map(item => ({
  ...item,
  color: item.z
}));

// 后续把processedData传入series的data配置即可

方案2：通过配置回调动态赋值 #

如果不想修改原始数据，可以直接在Highcharts的绘图配置中添加颜色回调，动态读取每个点的z值作为颜色：

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  plotOptions: {
    column: {
      color: function () {
        // 上下文this指向当前柱子对应的数据点实例
        return this.point.z;
      }
    }
  },
  series: [{
    data: rawData // 直接传入原始带z字段的数据即可
  }]
});

如果你的z字段不是直接的颜色值，是分类标识需要映射为对应颜色，可以额外配置映射表实现：

// z值到颜色的映射表
const colorMap = {
  "分类A": "#2f7ed8",
  "分类B": "#8bbc21",
  "分类C": "#910000"
};

// 上述两种方案中赋值color的位置改为读取映射表即可
// 比如方案2的回调改为 return colorMap[this.point.z]

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