如何遍歷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