Question

我使用Highmaps绘制一张基本colorAxis的世界地图，范围是0 - 100：

colorAxis: {
    min: 0,
    max: 100,
    minColor : '#ffff00',
    maxColor : '#ff0000'
}

到目前为止这么容易。现在我想为一些国家添加斜线阴影线。我偶然发现了以下插件：

http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill

这种方法很有效，但只有当您将鼠标悬停在某个国家/地区时（因为colorAxis在整个地图中都是全局的）。所以我试着包装fillSetter：

Highcharts.wrap(Highcharts.SVGElement.prototype, 'fillSetter', function (proceed, color, prop, elem)

我的问题：

这是要走的路吗？
如何从给定的elem确定它是否是该国家的路径（我注意到，Highmaps为每个Path元素添加了一个类highmaps-key-）。有更简单的解决方案吗？
我可以在此过程中以某种方式访问该系列吗？我需要检查我的数据，以确定该国家是否应填充纯色或斜角孵化

提前感谢所有提示！

Answer 1

感谢所有的投入。我最终采用了不同的方法。我没有包裹渲染本身，而是包裹了colorAxis的颜色计算。像这样：

 Highcharts.wrap(Highcharts.ColorAxis.prototype, 'toColor', function (proceed, value, point) {
    var color = proceed.call(this, value, point);
    if(point.isSpecial) {
        color = color.replace("rgb", "rgba");
        color = color.replace(")", ", 0.3)");
    }
    return color;
});

对于我们的用例，渲染不透明度降低的特殊点（国家）就足够了。这种方法还有另一个优点：没有必要单独处理SVG和VML渲染。如果你要包装fillSetter，如果你想支持IE8（参见模式填充插件的源代码），这就是必要的。 YMMV。

Highmaps：为colorAxis换行fillSetter

1 个答案: