如何用AnyChart.js的tooltip.format()访问数据集内的对象数组属性

失败原因说明 #

1. 直接写{%songs}.{%title}这类嵌套写法不符合Anychart模板语法规则，{%属性名}单标签仅支持读取顶级扁平属性，不支持直接访问数组嵌套字段
2. 回调函数中直接访问this.songs无法获取数据，Anychart的formatter回调上下文不直接挂载数据集自定义属性，需要通过官方提供的getData()方法获取

方案1：使用模板迭代语法（代码更简洁） #

Anychart原生支持{%each %}迭代块语法，可以直接在模板里遍历数组，写法如下：

tooltip.format(`
国家：{%country}<br>
热门歌曲列表：<br>
{%each songs as song %}
  {{song.rank}}. {{song.title}} - {{song.artists}}（{{song.duration}}）<br>
{%/each%}
`);

如果只需要展示标题，删除对应多余字段即可。 #

方案2：使用回调函数自定义拼接（灵活性更高） #

需要先通过this.getData('songs')获取数组数据，再自行拼接输出内容：

tooltip.format(function() {
  // 获取数据集里的songs数组
  const songs = this.getData('songs');
  // 容错处理：数组为空时返回提示
  if (!Array.isArray(songs) || songs.length === 0) {
    return `国家：{%country}<br>暂无歌曲数据`;
  }
  // 自定义拼接逻辑，可任意调整格式
  const songList = songs.map(song => {
    return `${song.rank}. 《${song.title}》 - ${song.artists}`;
  }).join('<br>');
  return `国家：{%country}<br>热门歌曲：<br>${songList}`;
});

内容的提问来源于stack exchange，提问作者Jplaudir8