Question

是否有一种方法可以在amcharts 4中使用精灵动态构建SVG？

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

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

但这似乎与amcharts 4无关。

对于初学者来说，stripdashoffset甚至不是sprite的受支持属性。为什么要麻烦支持strokedasharray，然后忽略strokedashoffet？！

第二个问题是找出如何将数据传递到sprite。

这是我传递给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'

Answer 1

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

应用stroke-dashoffset。（我看到您已经为此添加了a feature request on GitHub，所以为什么在该库中不包含它，何时/如果可以的话，可以在那里进行讨论。）
将数据/颜色传递到Sprite

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

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

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

event.target.dataItem.dataContext.colorsArr

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

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

我从map image demo分叉了map image data guide，并在此处添加了以上所有内容：

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

Amcharts v4定制SVG

1 个答案: