Как перебрать вложенный массив JSON в подсказке amcharts HTML
Шаблоны должны использоваться в заголовках, потому что компилятор должен создавать экземпляры разных версий кода в зависимости от параметров, заданных / выведенных для параметров шаблона. Помните, что шаблон не представляет собой код напрямую, а шаблон для нескольких версий этого кода. Когда вы компилируете функцию non-template в файле .cpp, вы компилируете конкретную функцию / класс. Это не относится к шаблонам, которые могут быть созданы с использованием разных типов, а именно, если при замене параметров шаблона конкретными типами необходимо исправить конкретный код.
Была функция с ключевым словом export, которая была предназначенный для отдельной компиляции. Функция export устарела в C++11 и, AFAIK, только один компилятор реализовал ее. Вы не должны использовать export. Отдельная компиляция невозможна в C++ или C++11, но, возможно, в C++17, если понятия в нее входят, мы могли бы иметь некоторый способ отдельной компиляции.
Для отдельной компиляции, которая должна быть достигнута, разделить проверка шаблона тела должна быть возможна. Кажется, что решение возможно с концепциями. Взгляните на этот документ , недавно представленный на совещании по стандартам. Я думаю, что это не единственное требование, поскольку вам все равно необходимо создать код кода шаблона в коде пользователя.
Отдельная проблема компиляции для шаблонов, я думаю, это также проблема, возникающая при миграции на модули, которые в настоящее время работают.
2 ответа
Использование карты и соединение должны сделать работу.
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>`;
amCharts не форматирует вложенные массивы данных. Руководство по массивам данных , Руководство по использованию форматирования строк & amp; заполнители данных , и все демонстрационные примеры используют плоские массивы.
Чтобы выйти за пределы встроенного, используйте адаптер для свойства 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 [ 1110]