Highcharts柱状图添加渐变色后所有柱子颜色一致问题求助

这个问题很常见，原因在于你复用了同一个perShapeGradient对象给所有颜色条目——JavaScript里对象是引用类型，所有颜色配置实际上指向了同一个内存地址的渐变对象，Highcharts处理时就会把所有系列的渐变都统一成同一个，自然看起来颜色都一样了。

修复方案 #

你需要为每个颜色条目创建独立的渐变配置对象，而不是复用同一个。这里有两种常用方式：

方式1：直接定义独立的linearGradient对象

把每个颜色的linearGradient都写成独立的对象，确保每个系列拿到的是不同的配置：

colors: [
  { 
    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, // 每个条目独立的渐变对象
    stops: [ [0, '#c2352b'], [1, '#f44336'] ] 
  },
  { 
    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
    stops: [ [0, '#1b75bf'], [1, '#2196f3'] ] 
  },
  { 
    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
    stops: [ [0, '#cc7a00'], [1, '#ff9800'] ]
  }
]

方式2：用函数生成独立的渐变对象

如果你的perShapeGradient原本是用来复用渐变参数的，可以把它改成函数，每次调用返回一个新对象：

// 先定义生成渐变对象的函数
function getPerShapeGradient() {
  return { x1: 0, y1: 0, x2: 0, y2: 1 }; // 每次调用都返回新对象
}

// 然后在colors数组里调用函数
colors: [
  { linearGradient: getPerShapeGradient(), stops: [ [0, '#c2352b'], [1, '#f44336'] ] },
  { linearGradient: getPerShapeGradient(), stops: [ [0, '#1b75bf'], [1, '#2196f3'] ] },
  { linearGradient: getPerShapeGradient(), stops: [ [0, '#cc7a00'], [1, '#ff9800'] ] }
]

这样每个系列都会拥有属于自己的渐变配置，柱子的渐变色就能正常区分开了。

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