Amcharts v4 custom SVG

Question

Есть ли способ динамически построить SVG с использованием спрайтов в амхартах 4?

Пример: снимок экрана

Существует 20 различных типов, которые представлены цветами. Каждый вывод может содержать множество типов. Таким образом, пример может быть, что булавка имеет 3 типа и будет состоять из 3 цветов.

У меня есть путь SVG, который является кругом. С помощью обычных JS и SVG я могу создать путь для каждого типа и изменить цвет обводки, strokedasharray и strokedashoffset. В результате получается красивый круг с 3 цветами.

Однако, кажется, это невозможно сделать с амхартами 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'

Answer 1

С учетом того, что вы предоставили, моделирование ваших пользовательских SVG выходит за рамки того, на что можно ответить, поэтому я попытаюсь решить:

1. применение stroke-dashoffset несмотря на отсутствие врожденной поддержки библиотек,(Я вижу, что вы добавили запрос функции на GitHub для него, поэтому, почему библиотека не включает его, когда / если он будет, можно оставить там для обсуждения.)
2. передача данных / цветов в Sprite

Для обоих нам придется подождать, пока экземпляры Sprite не будут готовы вместе с их данными.Предполагая, что ваша переменная single является ссылкой на MapImageSeries.mapImages.template, мы можем настроить "inited" событие следующим образом:

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

Наши данные и заполнители данных на самом деле не поддерживают вложенные массивы / объекты в целом, так как ваши цвета вложены в поле, мы можем найти их через:

event.target.dataItem.dataContext.colorsArr

Затем вы можете установить fill и stroke на Sprite или event.target.children.getIndex(0) вручную оттуда (в моей демонстрации ниже индекс будет 1, поскольку mainPin1 не первый / единственный дочерний элемент, созданный в шаблоне MapImage).

Что касается stroke-dashoffset, вы можете получить доступ к фактическому визуализированному SVGElement через sprite.group.node и просто использовать setAttribute.

Я разветвил нашу демонстрацию изображения карты с нашей картыСправочник по изображениям и сюда добавили все вышеперечисленное:

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