如何在 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 文档 AMCharts Tooltip 但无法找到遍历嵌套数组的方法

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 不格式化嵌套数据数组。 guide on data arrays, the guide on using string formatting & data placeholders，所有演示都使用平面数组。

要超越内置功能，请启用 adapter for the tooltipHTML property and manually iterate over the nested array there. Keep the first part of the string that's already supported, this will allow the tooltip to trigger and the adapter for the property with it as well. Since you're using series.tooltipHTML I presume you have the chart cursor。在这种情况下，适配器的 target 参数将始终 return 系列，此时可能不清楚如何获取当前悬停列的数据。为此，只需参考该系列的 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

如何在 amcharts 工具提示 HTML 中遍历嵌套 JSON 数组

How to Iterate through a nested JSON array in amcharts tooltip HTML

javascript

arrays

amcharts