Как перебрать вложенный массив JSON в подсказке amcharts HTML - PullRequest
Новая
       9

Как перебрать вложенный массив JSON в подсказке amcharts HTML

0 голосов
/ 16 января 2019

У меня есть переменная данных со следующим 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 , но не смог найти способ перебора вложенного массива

Ответы [ 2 ]

0 голосов
/ 17 января 2019

amCharts не форматирует вложенные массивы данных. руководство по массивам данных , руководство по использованию форматирования строк и заполнителей данных , а во всех демонстрационных материалах используются плоские массивы.

Чтобы выйти за пределы встроенного, используйте адаптер для свойства tooltipHTML и вручную переберите туда вложенный массив. Сохраните первую часть строки, которая уже поддерживается, это позволит всплывающей подсказке вызывать и адаптер для свойства с ним. Поскольку вы используете series.tooltipHTML, я полагаю, у вас включен курсор диаграммы . В этом случае аргумент target для адаптера всегда будет возвращать серию, может быть неясно, как получить данные текущего столбца на данный момент. Для этого просто обратитесь к свойству series * 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

0 голосов
/ 16 января 2019

Использование карты и соединение должны сделать работу. 

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>`;
...