如何遍历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 as

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://imgur.com/zmf9EZW

我如何遍历distSubParts嵌套数组并将其显示在AMCharts工具提示中？

我已经阅读过AMCharts Docs AMCharts工具提示，但是找不到遍历嵌套数组的方法

Answer 1

使用map和join应该可以完成这项工作。

var series = { tooltipHTML: ''};
var data = {
      "district": "Karachi West",
      "visits": 13223,
      "distSubParts": [
       {
          "name": "ABC",
          "svisits": 212
       },
       {
           "name": "ZXA",
            "svisits": 1323
        }
         ]
   };


var distSubParts = data.distSubParts.map(function(item){ 
                return "<tr><th align=\"left\">Name</th>" +
                       "<td>" + item .name + "</td></tr>" +
                       "<tr><th align=\"left\">Visits</th>" +
                        "<td>" + item.svisits +" </td></tr>"    
                            }).join(' ')

series.tooltipHTML = `<center><strong> {district}</strong></center>
                            <hr />
                            <table>` +
                             distSubParts +
                            `</table>`;

Answer 2

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