Amcharts v4 自定义 SVG答案

【问题标题】：Amcharts v4 custom SVGAmcharts v4 自定义 SVG
【发布时间】：2019-01-24 14:22:11
【问题描述】：

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

示例：screenhot

有 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'

【问题讨论】：

标签： svg amcharts

【解决方案1】：

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

应用stroke-dashoffset 尽管缺乏固有的库支持。（我看到你已经为它添加了a feature request on GitHub，那么为什么库不包含它，何时/如果它会，可以留在那里讨论。）
将数据/颜色传递给Sprite

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

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

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

event.target.dataItem.dataContext.colorsArr

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

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

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

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

【讨论】：