如何在 amcharts 工具提示 HTML 中迭代嵌套 JSON 数组

Question

我有一个带有以下 JSON 的数据变量

var data = [

        {
            "district": "Karachi West",
            "visits": 13223,
            "distSubParts": [
           {
                "name": "ABC",
                "svisits": 212
            },
            {
                "name": "ZXA",
                "svisits": 1323
            }
            ]


        },
{
            "district": "Quetta South",
            "visits": 234232,
            "distSubParts": [
           {
                "name": "GGG",
                "svisits": 234
            },
            {
                "name": "RRR",
                "svisits": 234432
            }
            ]


        },



    ];

和 AMCharts Series HTML 为

series.tooltipHTML = `<center><strong> {district}</strong></center>
                            <hr />
                            <table>
                            <tr>
                              <th align="left">Name</th>
                              <td>{distSubParts.name}</td>
                            </tr>
                            <tr>
                              <th align="left">Visits</th>
                              <td>{distSubParts.svisits}</td>
                            </tr>
                            </table>
                           `;

现在，当我看到工具提示时，就像下图所示，没有显示 distSubParts 嵌套数组

https://i.stack.imgur.com/kxLTc.jpg

如何迭代 distSubParts 嵌套数组并将其显示在 AMCharts 工具提示中？

我已阅读 AMCharts Docs AMCharts Tooltip但找不到迭代嵌套数组的方法

Answer 1

amCharts 不格式化嵌套数据数组。数据数组指南、使用字符串格式和数据占位符指南以及所有演示都使用平面数组。

要超越内置功能，请使用属性适配器tooltipHTML并手动迭代那里的嵌套数组。保留已支持的字符串的第一部分，这将允许触发工具提示以及属性的适配器。由于您正在使用，series.tooltipHTML我假设您已启用图表光标。在这种情况下，target适配器的参数将始终返回系列，此时可能不清楚如何获取当前悬停列的数据。为此，只需参考该系列的tooltipDataItem属性即可。数据（如果有）将属于其dataContext财产。所以你的代码可能看起来像这样：

// Set a tooltipHTML so the adapter can trigger
series.tooltipHTML = `<center><strong> {district}</strong></center>
<hr />`;

// Use an adapter to iterate through the nested array and provide formatted HTML
series.adapter.add("tooltipHTML", function(html, target) {
  if (
    target.tooltipDataItem.dataContext &&
    target.tooltipDataItem.dataContext.distSubParts &&
    target.tooltipDataItem.dataContext.distSubParts.length
  ) {
    var nameCells, svisitsCells;
    nameCells = "";
    svisitsCells = "";
    target.tooltipDataItem.dataContext.distSubParts.forEach(part => {
      nameCells += `<td>${part.name}</td>`;
      svisitsCells += `<td>${part.svisits}</td>`;
    });
    html += `<table>
    <tr>
      <th align="left">Name</th>
      ${nameCells}
    </tr>
    <tr>
      <th align="left">Visits</th>
      ${svisitsCells}
    </tr>
    </table>`;
  }
  return html;
});

这是上面的演示：

https://codepen.io/team/amcharts/pen/9acac2b5b0fcb105c8bf4ed29767430d