Amcharts v4 自定义 SVG

Question

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

示例：screenhot

有 20 种不同的类型，用颜色表示。每个引脚可以包含多种类型。所以一个例子可以是一个图钉有 3 种类型，将由 3 种颜色组成。

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

然而这似乎不可能用 amcharts 4 来做。

对于初学者来说，精灵甚至不支持 strokedashoffset 属性。为什么你会费心支持 strokedasharray 而忽略 strokedashoffet？！

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

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

[{
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'

Answer 1

根据您提供的内容，模拟您的自定义 SVG 超出了可以回答的范围，所以我会尝试解决：

应用 stroke-dashoffset 尽管缺乏固有的库支持。（我看到你已经为它添加了 a feature request on GitHub，那么为什么库不包括它，when/if 它会，可以留在那里讨论。）
将 data/colors 传递给 Sprite

对于两者，我们都必须等到 Sprite 的实例及其数据准备就绪。假设您的 single 变量是对 MapImageSeries.mapImages.template 的引用，我们可以像这样设置 an "inited" event：

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

我们的数据和 data placeholders 通常不真正支持嵌套 arrays/objects，因为您的颜色嵌套在一个字段中，我们可以通过以下方式找到它们：

event.target.dataItem.dataContext.colorsArr

然后您可以从那里手动设置 Sprite 或 event.target.children.getIndex(0) 上的 fill 和 stroke（在我下面的演示中，索引将是 1 因为 mainPin1 不是在 MapImage 模板上创建的 first/only child。

至于 stroke-dashoffset，您可以通过 sprite.group.node 访问实际渲染的 SVGElement，只需使用 setAttribute.

我分叉了我们的 map image demo from our map image data guide 并在此处添加了以上所有内容：

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

Amcharts v4 自定义 SVG

Amcharts v4 custom SVG

svg

amcharts