Question

我有一个用amCharts制作的甘特图，它工作正常。如下所示，我从ColumnSeries中设置了TooltipText。

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.columns.template.tooltipText = "Load nº: {Load}\nStart: {openDateX}\nEnd: {dateX}\nType: {PartType}";

这部分没问题。但是现在我需要根据规则动态更改TooltipText。我阅读了有关适配器的文档，并编写了这段代码。

series1.columns.template.adapter.add('getTooltipText', function(text, target) {
    var data = target.tooltipDataItem.dataContext;
    if (data.Load != null )
       return "Load nº: {data.Load}\nStart: {data.openDateX}\nEnd: {data.dateX}\nType: {data.PartType}";
    else
        return "Start: {data.openDateX}\nEnd: {data.dateX}";
});

但是此代码不起作用。工具提示不再显示。我做错了什么？谁能帮我吗？

Answer 1

真正的关闭！

如果您看过getTooltipText, that was probably for Axis Tooltips。

对于您的列，只需tooltipText即可完成操作，因此请尝试以下操作：

series1.columns.template.adapter.add('tooltipText', function(text, target) {
    var data = target.tooltipDataItem.dataContext;
    if (data.Load != null )
       return "Load nº: {Load}\nStart: {openDateX}\nEnd: {dateX}\nType: {PartType}";
    else
        return "Start: {openDateX}\nEnd: {dateX}";
});

还请注意，我没有通过data.fieldName嵌套上面的数据，只是通过fieldName嵌套了数据。 Check out our guide on Data to learn more about how the charts determine where to look for fieldName, i.e. string placeholders.

在下面的演示中，我将使用此代码：

series.columns.template.adapter.add('tooltipText', function(text, target) {
    var data = target.tooltipDataItem.dataContext;
    if (data.Load != null )
       return "Load nº: {categoryX}: [bold]{valueY}[/]";
    else
        return "Start: {categoryX}: [bold]{valueY}[/]";
});

演示：

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

这也适用于图表光标（am4charts.XYCursor）。

动态工具提示文字amChart

1 个答案: