Image AMSCHART4:如何将图像添加到轴(valueAxis)标签?

Image AMSCHART4:如何将图像添加到轴(valueAxis)标签?,image,axis,amcharts,axis-labels,amcharts4,Image,Axis,Amcharts,Axis Labels,Amcharts4,使用amcharts4,我想向ValueAxis的标签添加一个图像。这可能吗?我已经了解了如何将SVG图像添加到项目符号(请参阅)。但是有可能对ValueAxis的标签做类似的事情吗 下面是这样一个图像的示例,我想在数字旁边添加: 当前,值轴如下所示,标签旁边应有一个图标: 编辑: 多亏@zeroin的回答,我找到了一个解决方案。然而,在使用带有模板的axis项目符号时,似乎存在一个奇怪的错误。不是每一个子弹都是隐藏的,即使它的标签是隐藏的。这是相关的代码,一个屏幕截图和一个复制文件 va

使用amcharts4,我想向ValueAxis的标签添加一个图像。这可能吗?我已经了解了如何将SVG图像添加到项目符号(请参阅)。但是有可能对ValueAxis的标签做类似的事情吗

下面是这样一个图像的示例,我想在数字旁边添加:

当前,值轴如下所示,标签旁边应有一个图标:


编辑:

多亏@zeroin的回答,我找到了一个解决方案。然而,在使用带有模板的axis项目符号时,似乎存在一个奇怪的错误。不是每一个子弹都是隐藏的,即使它的标签是隐藏的。这是相关的代码,一个屏幕截图和一个复制文件

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;

EDIT2:


在当前版本的amcharts(
4.5.14
)中,此错误似乎已修复。现在它可以正常工作了。

您的问题很及时-在今天发布的版本(4.5.9)中,我们向AxisDataItem添加了bullet属性。因此,您可以通过模板将图像或任何其他精灵添加到所有轴标签,或以所需的值创建轴范围,并在其中添加项目符号,如:

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;

非常感谢您的回答!我目前正在尝试这样做,但我不太确定如何通过模板将图像添加到所有轴标签。我尝试使用
valueAxis.renderer.labels.template.dataItem.bullet
,但此时尚未定义
dataItem
。是通过事件(
series.events.on('inited',()=>{valueAxis.renderer.labels.each(…)});})将此图像追溯添加到axis的想法)?不幸的是,此方法无法正常工作,因为它有时(并非总是…)只是无法添加图像。请尝试将其添加到
valueAxis.dataItems.template.bullet
太好了,谢谢!但这似乎有一个bug。请参阅我的更新问题。此错误似乎已在当前版本中修复!再次感谢!谢谢你的注意,我们会尽力解决的。