Amcharts4: Как добавить изображение к метке оси (valueAxis)?

С помощью amcharts4 я хотел бы добавить изображение к метке ValueAxis. Это возможно? Я узнал, как добавить изображение SVG в пулю (см. демо). Но можно ли сделать что-то подобное с меткой ValueAxis?

Вот пример такого изображения, я бы хотел добавить рядом с номером:

В настоящее время ось значений выглядит так, и рядом с меткой должен быть значок:

РЕДАКТИРОВАТЬ:

Благодаря ответу @ zeroin я нашел решение. Однако при использовании маркера оси с шаблоном возникает странная ошибка. Не каждая пуля скрыта, даже если ее метка скрыта. Вот соответствующий код, снимок экрана и codepen для воспроизведения.

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 800;
valueAxis.renderer.minGridDistance = 30;
valueAxis.renderer.opposite = true;
valueAxis.renderer.labels.template.dx = 13;
valueAxis.strictMinMax = true;

var image = new am4core.Image();
image.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/man-user.svg";
image.width = 12;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
image.dx = 13;
image.dy = -0.5;
image.opacity = 0.3;
valueAxis.dataItems.template.bullet = image;

РЕДАКТИРОВАТЬ2:

Кажется, эта ошибка исправлена ​​в текущем выпуске amcharts (4.5.14). Теперь все работает как положено.


image amcharts4 axis axis-labels amcharts
person ssc-hrep3    schedule 23.07.2019    source источник
comment
Спасибо, что обратили внимание, мы постараемся это исправить.   -  person zeroin    schedule 28.07.2019

Ответы (1)


arrow_upward
2
arrow_downward

Ваш вопрос как раз вовремя - в выпущенной сегодня версии (4.5.9) мы добавили свойство маркера в AxisDataItem. Таким образом, вы можете добавить изображение или любой другой спрайт ко всем меткам осей с помощью шаблона или создать диапазон оси с нужным вам значением и добавить туда маркер, например:

var range = valueAxis.axisRanges.create();
range.value = 1500;
//range.label.text = "1500";

var image = new am4core.Image();
image.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/man-user.svg";
image.width = 15;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
image.dx = -55;
range.bullet = image;

https://codepen.io/team/amcharts/pen/JgXqvp

person zeroin    schedule 24.07.2019
comment
Большое спасибо за этот ответ! В настоящее время я пытаюсь это сделать, но я не совсем уверен, как добавить изображение ко всем меткам осей с помощью шаблона. Я пробовал использовать valueAxis.renderer.labels.template.dataItem.bullet, но dataItem на тот момент еще не определен. Есть ли идея задним числом добавить это изображение на ось через событие (series.events.on('inited', () => { valueAxis.renderer.labels.each(...) }); });)? К сожалению, этот подход не работал должным образом, поскольку иногда (не всегда ...) просто не добавлялись изображения. - person ssc-hrep3; 26.07.2019
comment
попробуйте добавить его в valueAxis.dataItems.template.bullet - person zeroin; 27.07.2019
comment
Большое спасибо! Но, похоже, с этим есть ошибка. См. Мой обновленный вопрос. - person ssc-hrep3; 28.07.2019
comment
Кажется, что в текущем выпуске ошибка исправлена! Спасибо еще раз! - person ssc-hrep3; 14.08.2019