动态工具提示文本 amChart

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

Dynamic Tooltip Text amChart

javascript

charts

amcharts