如何使用 anychart.js 中的 tooltip.format() 访问 objects 的数组

Question

我在尝试在 Anychart.js 地图的工具提示上显示 objects 数组时遇到问题。我知道我们可以通过执行以下操作来访问数据集：%[name of 属性 in data set]。我的数据集具有以下形式：

{
    "country": "Austria",
    "id": "AT",
    "continent": "Europe",
    "songs": [
        {
        "rank": 33,
        "title": "Stuck with U (with Justin Bieber)",
        "artists": "Ariana Grande, Justin Bieber",
        "album": "Stuck with U",
        "explicit": 0,
        "duration": "3:48"},
        {
        "rank": 34,
        "title": "Late Night",
        "artists": "Luciano",
        "album": "Late Night",
        "explicit": 0,
        "duration": "3:20"
        },
        ... more objects
        ]
    }
}

如果我想访问国家/地区属性，我只需将其添加到工具提示中即可：

tooltip.format("Country: " + {%country});

问题是在尝试访问 objects 的数组时，我尝试了不同的变体，其中 none 有效。试图显示每首歌的标题：

tooltip.format({%songs}.{%title});
tooltip.format({%songs.%title});
tooltip.format({%songs}[{%title}]);

我还在文档中看到我们可以将函数作为参数发送，所以我尝试了以下方法，我将连接 collection 的每个标题，但也没有成功：

tooltip.format(function() {
  let concatenated = '';
  this.songs.forEach(song => {
    concatenated += song + ' ';
  });
  return concatenated;
});

非常感谢你们的帮助。

Answer 1

字符串标记不支持嵌套 objects/properties。但是你可以使用格式化的回调函数来访问songs。上下文原型包括 getData() 提供的方法。像这样：

  series.tooltip().format(function() {
    console.log(this.getData('songs'));
    return 'tooltip';
  });

详情请查看我们准备的the live sample。

Answer 2

以防其他人正在寻找此答案的解决方案。我想出了如何遍历嵌入数组，并调用特定信息。

  chart.edges().tooltip().format(function () {
    var format = ''
    var songs = this.getData('songs');
    songs.forEach(function (data, builtin, dom) {
      format = '<p>'+data['title']+' by '+data['artists']+'&nbsp;</span></p>' + format
    });
    console.log(format)
    return format
  });

如何使用 anychart.js 中的 tooltip.format() 访问 objects 的数组

How to access an array of objects with tooltip.format() from anychart.js

javascript

anychart

anychart-8.2