代码之家 › 专栏 › 技术社区 › Sayyed Dawood

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

amcharts arrays javascript

-1

Sayyed Dawood · 技术社区 · 7 年前

我有一个带有以下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 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>
                           `;

现在,当我看到工具提示时,它就像下面的图像一样,没有显示任何distsupart嵌套数组

https://imgur.com/zmf9EZW

如何迭代distsubart嵌套数组并在amcharts工具提示中显示它?

我读过AMCharts文档 AMCharts Tooltip 但找不到迭代嵌套数组的方法

2 回复 | 直到 7 年前

notacouch 7 年前

AMCharts不格式化嵌套的数据数组。这个 guide on data arrays , the guide on using string formatting & data placeholders 所有演示都使用平面阵列。

要超越内置功能,请使用 adapter 对于 tooltipHTML 属性,并在其中手动迭代嵌套数组。保留已经支持的字符串的第一部分,这将允许工具提示触发该字符串,并允许使用该字符串的属性的适配器。因为你在使用 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

matvs 7 年前

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