Question

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

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

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

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

Answer 1

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

您可以在 API 中找到有关它的信息：

<块引用>

此外，图形的 URL 可以通过以下形式给出：'url(graphic.png)'。请注意，要将图像应用于导出的图表，其 URL 需要可由导出服务器访问。

符号路径生成的自定义回调也可以添加到 Highcharts.SVGRenderer.prototype.symbols。然后回调被使用它的方法名称，如演示中所示。

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 标记上填充系列的颜色

1 个答案: