Highcharts 在 svg 标记上填充系列的颜色

Question

我制作了一个带有自定义标记（而不是圆圈）的向下钻取气泡图。我使用了 highcharts 提供的标记并且它运行良好（参见我的示例：https://jsfiddle.net/vegaelce/t0oha7q6/ with square markers）。现在我想使用 svg 图像而不是方形标记。它在我指定时工作（参见 jsfiddle 的第 41 行）：

marker: {
            symbol: 'url(https://www.svgrepo.com/show/197729/dollar.svg)',
            lineWidth: 3,
        },

但我的问题是所有标记都是黑色的。我需要在每个标记上设置系列值的颜色（对于方形或圆形）。我尝试使用没有填充属性的 svg，但 Highcharts 从未改变颜色。这可能吗？

第二个问题是关于气泡图例的：是否可以为气泡大小图例而不是圆形获得相同的形状？

Answer 1

请注意，将符号定义为 SVG 元素会将 SVG 元素解析为图像（在控制台中查看）。

您可以在 API:

中找到有关它的信息

Additionally, the URL to a graphic can be given on this form: 'url(graphic.png)'. Note that for the image to be applied to exported charts, its URL needs to be accessible by the export server.

Custom callbacks for symbol path generation can also be added to Highcharts.SVGRenderer.prototype.symbols. The callback is then used by its method name, as shown in the demo.

API: https://api.highcharts.com/highcharts/series.line.marker.symbol

如果您想添加自定义符号，您应该使用 SVGRenderer 工具来添加，就像在附带的演示中一样：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-marker-symbol/

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {
    return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

Highcharts 在 svg 标记上填充系列的颜色

Highcharts fill serie's color on svg marker

svg

markers

fill

highcharts