Highcharts bar图表背景图案、渐变自动旋转90度问题解决方法

问题根因 #

这是Highcharts的默认内置逻辑，并非渲染bug：bar（条形图）本质是坐标系旋转90度的横向column（柱形图），核心渲染层默认会对柱体的填充资源（线性渐变、图案填充）做对应角度的旋转适配，来匹配纵向柱到横向柱的方向变化，因此复用column的配色代码时会出现渐变方向、图案角度和预期不符的问题。

原生配置规避方案 #

不需要上层业务逐个修改渐变、图案的角度参数，直接通过官方提供的配置项即可关闭该默认行为：

• 适用于 Highcharts 9.3.0 及以上版本（推荐）
  直接在bar图表的配置项中添加如下配置，即可让填充效果和堆叠柱形图完全一致，可直接复用原有配色代码：

  plotOptions: {
    bar: {
      // 关闭bar类型默认的填充色90度自动旋转
      colorRotation: 0,
      // 关闭图案填充的自动旋转适配
      patternOptions: {
        autoRotate: false
      }
    }
  }
  

• 适用于 9.3.0 以下旧版本
  可以通过Highcharts原生的方法包裹能力做全局统一拦截，不需要侵入业务侧的配色定义：

  // 全局拦截bar类系列的颜色获取逻辑，自动抵消默认旋转
  Highcharts.wrap(Highcharts.Series.prototype, 'getColor', function (proceed) {
    proceed.call(this, ...Array.prototype.slice.call(arguments, 1))
    if (this.type === 'bar') {
      // 修正线性渐变方向
      if (this.color.linearGradient) {
        const g = this.color.linearGradient
        ;[g.x1, g.x2, g.y1, g.y2] = [g.y1, g.y2, g.x1, g.x2]
      }
      // 修正图案旋转角度
      if (this.color.pattern) {
        this.color.pattern.rotation = (this.color.pattern.rotation || 0) - 90
      }
    }
  })
  

注意：不要尝试通过chart.inverted: true将column转为横向柱来规避问题，该配置同样会触发填充自动旋转逻辑，表现和直接使用bar类型无差异。

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