highcharts热图区域pattenObjects可以尊重色轴所应用的颜色吗？

Question

我正在尝试满足高图表热图的样式要求。当前，我们通过将区域应用于x轴来对带有高图模式填充的“不完整”数据进行样式设置。

图表当前看起来像这样，将模式填充应用于右侧区域：jsfiddle heatmap with incomplete zones

配置色轴：

colorAxis: {
   dataClasses: [
      {to: 3.33325, name: "<3.3", color: "#FFC4FF"},
      {from: 3.33325, to: 5, name: "3.3 to 5.0", color: "#FF70FF"},
      {from: 5, to: 6.66675, name: "5.0 to 6.7", color: "#D500F9"},
      {from: 6.66675, to: 8.33325, name: "6.7 to 8.3", color: "#550075"},
      {from: 8.33325, name: ">8.3", color: "#330046"},
  ]
}

系列：

series: {
   data: {
      [
         {x: 0, y: 0, z: 1},
         {x: 0, y: 1, z: 2},
         {x: 0, y: 2, z: 3},
         {x: 1, y: 0, z: 4},
         {x: 1, y: 1, z: 5},
         {x: 1, y: 2, z: 6},
         {x: 2, y: 0, z: 7}
         {x: 2, y: 1, z: 8}
         {x: 2, y: 2, z: 9}
      ]
   }
   zones: [
      {value: 2},
      {
         color: {
            pattern:
            {
               backgroundColor: "#CCCCCC",
               height: 45,
               path: {
                 d: "M-1,1 l2,-2 M0,45 l45,-45 M44,46 l2,-2", 
                 stroke: "#FFFFFF",
                 strokeWidth: 3
               }
               width: 45
            }
         }
      }
   ]
}

现在所有的图案填充均为灰色，但我试图弄清楚是否有办法设置配置，以便背景色将遵守dataClasses设置的颜色。我尝试将其设置为currentColor，但是colorAxis颜色未应用于父元素，因此无法正常工作。我试图避免使用classNames / styled模式（如果可能）有什么建议么？谢谢

Answer 1

最有效的方法是退出区域并更改通过覆盖translateColors方法生成点的颜色的方式：

(function(H) {
    H.Series.prototype.translateColors = function() {
        var series = this,
            points = this.data.length ? this.data : this.points,
            nullColor = this.options.nullColor,
            colorAxis = this.colorAxis,
            colorKey = this.colorKey;

        points.forEach(function(point) {
            var value = point[colorKey],
                color;

            color = point.options.color ||
                (point.isNull ?
                    nullColor :
                    (colorAxis && typeof value !== 'undefined') ?

                    (
                        point.x < 2 ?
                        colorAxis.toColor(value, point) : {
                            pattern: {
                                backgroundColor: colorAxis.toColor(value, point),
                                height: 45,
                                width: 45,
                                path: {
                                    d: "M-1,1 l2,-2 M0,45 l45,-45 M44,46 l2,-2",
                                    stroke: '#FFFFFF',
                                    strokeWidth: 3
                                }
                            }
                        }
                    ) :

                    point.color || series.color);

            if (color) {
                point.color = color;
            }
        });
    }
}(Highcharts));

---

实时演示： http://jsfiddle.net/BlackLabel/Lygwz16j/

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts