svg - Amcharts v4 自定义 SVG

Question

有没有办法在 amcharts 4 中使用精灵动态构建 SVG？

示例：屏幕截图

有 20 种不同的类型，用颜色表示。每个引脚可以包含多种类型。因此，一个示例可以是一个引脚有 3 种类型，并且由 3 种颜色组成。

我有一个圆形的 SVG 路径。使用常规的 JS 和 SVG，我可以为每种类型创建路径并更改笔触颜色、strokedasharray 和 strokedashoffset。这会产生具有 3 种颜色的漂亮圆圈。

然而，这似乎与 amcharts 4 无关。

对于初学者，strokedashoffset 甚至不是精灵支持的属性。你为什么要费心支持strokedasharray然后忽略strokedashoffet？！

第二个问题是找出如何将数据传递给精灵。

这是我传递给 mapImageSeries 类的数据对象的示例。

[{
amount: 3,
client: undefined,
colorsArr: {0: "#FFB783", 1: "#FD9797", 2: "#77A538"},
dashArray: "500,1000",
dashOffset: 1500,
divided: 500,
global: true,
groupId: "minZoom-1",
hcenter: "middle",
id: "250",
latitude: 50.53398,
legendNr: 8,
longitude: 9.68581,
name: "Fulda",
offsetsArr: {0: 0, 1: 500, 2: 1000},
scale: 0.5,
title: "Fulda",
typeIds: (3) ["4", "18", "21"],
typeMarker: " type-21 type-18 type-4",
vcenter: "bottom",
zoomLevel: 5
}]

似乎不可能将颜色传递给精灵。

var svgPath = 'M291,530C159,530,52,423,52,291S159,52,291,52s239,107,239,239c0,131.5-106.3,238.3-237.7,239'
var mainPin1 = single.createChild(am4core.Sprite)
mainPin1.strokeWidth = 100
mainPin1.fill = am4core.color('#fff')
mainPin1.stroke = am4core.color('#ff0000')
mainPin1.propertyFields.strokeDasharray = 'dashArray'
mainPin1.propertyFields.strokeDashoffset = 'dashOffset'
mainPin1.path = svgPath
mainPin1.scale = 0.04
mainPin1.propertyFields.horizontalCenter = 'hcenter'
mainPin1.propertyFields.verticalCenter = 'vbottom'

标签： svgamcharts

Answer 1

使用您提供的内容，模拟您的自定义 SVG 超出了可以回答的范围，因此我将尝试解决：

1. stroke-dashoffset尽管缺乏天生的图书馆支持，但仍然适用。（我看到你在 GitHub 上为它添加了一个功能请求，所以为什么库不包含它，何时/如果它会，可以留在那里讨论。）
2. 将数据/颜色传递给Sprite

对于这两种情况，我们都必须等到Sprites 的实例连同它们的数据一起准备好。假设您的single变量是对 a 的引用MapImageSeries.mapImages.template，我们可以像这样设置一个"inited"事件：

single.events.once("inited", function(event){
  // ...
});

我们的数据和数据占位符通常并不真正支持嵌套数组/对象，因为您的颜色嵌套在一个字段中，我们可以通过以下方式找到它们：

event.target.dataItem.dataContext.colorsArr

然后，您可以从那里手动设置and fill（stroke在我下面的演示中，索引将是因为不是在模板上创建的第一个/唯一的孩子）。Spriteevent.target.children.getIndex(0)1mainPin1MapImage

至于stroke-dashoffset，您可以通过访问实际呈现的 SVGElementsprite.group.node并使用setAttribute.

我从我们的地图图像数据指南中分叉了我们的地图图像演示，并在此处添加了以上所有内容：

https://codepen.io/team/amcharts/pen/6a3d87ff3bdee7b85000fe775af9e583