如何解决Highcharts 在 svg 标记上填充系列的颜色
我用自定义标记(而不是圆圈)制作了一个钻取气泡图。 我使用了 highcharts 提供的标记,它运行良好(参见我的示例:https://jsfiddle.net/vegaelce/t0oha7q6/ 带有方形标记)。 现在我想使用 svg 图像而不是方形标记。当我指定时它正在工作(请参阅 jsfiddle 的第 41 行):
marker: {
symbol: 'url(https://www.svgrepo.com/show/197729/dollar.svg)',lineWidth: 3,},
但我的问题是所有标记都是黑色的。我需要在每个标记上设置系列值的颜色(如方形或圆形)。我尝试使用没有填充属性的 svg,但 Highcharts 永远不会改变颜色。这可能吗?
第二个问题是关于气泡图例的:气泡大小图例是否可以获得相同的形状而不是圆形?
解决方法
请注意,将符号定义为 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,'L',x + w,y + h,'M','z'];
};
if (Highcharts.VMLRenderer) {
Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。