动态工具提示文本 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，那可能是针对 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. 查看我们的数据指南，了解有关图表如何确定查找位置的更多信息fieldName，即字符串占位符。

在下面的演示中，我使用了这个：

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)。