如何遍历 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 系列 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://imgur.com/zmf9EZW

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

我已阅读 AMCharts Docs AMCharts Tooltip，但找不到遍历嵌套数组的方法

Answer 1

amCharts 不格式化嵌套数据数组。 guide on data arrays、the guide on using string formatting & data placeholders 和所有的演示都使用平面数组。

要超越内置的内容，请为 tooltipHTML 属性使用 adapter，并手动迭代那里的嵌套数组。保留已支持的字符串的第一部分，这将允许触发工具提示以及属性的适配器。由于您使用的是series.tooltipHTML，我认为您启用了chart cursor。在这种情况下，适配器的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

Answer 2

使用 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>`;