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

Question

我正在尝试满足 highcharts 热图的样式要求。目前，我们通过将区域应用于 x 轴来使用 Highcharts 模式填充来设置“不完整”数据的样式。

图表目前看起来像这样，图案填充应用于右侧的区域:
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