Отображение AMCharts внутри ячейки таблицы HTML
Я пытаюсь отобразить AMCharts внутри ячейки таблицы HTML. Я просматриваю данные и создаю диаграмму для каждого элемента данных. Вот мой HTML-код:
<table id = "theTable" class = "display table table-bordered">
<thead>
<tr>
<th>Department</th>
<th>Number of Employees</th>
<th>Number of Volunteers</th>
<th>Chart</th>
</tr>
</thead>
<tbody>
<tr>
<td>IT</td>
<td>30</td>
<td>5</td>
<td><div id = "chart_1"></div></td>
</tr>
<tr>
<td>HR</td>
<td>35</td>
<td>14</td>
<td><div id = "chart_2"></div></td>
</tr>
<tr>
<td>LG</td>
<td>100</td>
<td>65</td>
<td><div id = "chart_3"></div></td>
</tr>
</tbody>
</table>
А вот мой код Javascript:
var emp = [30, 35, 100];
var vol = [5, 14, 65];
for (var j = 0; j < 3; j++) {
var str = "chart_" + j.toString();
var chart = AmCharts.makeChart(str, {
"type": "pie",
"dataProvider": [{
"type": "Employees",
"per": parseFloat(emp[j]),
"color": "#54e83a"
}, {
"type": "Volunteers",
"per": parseFloat(vol[j]),
"color": "#41ba2c"
}],
"valueField": "per",
"titleField": "type",
"colorField": "color",
"balloon": {
"fixedPosition": true
},
"export": {
"enabled": true
},
"startDuration": 0
});
}
Что я делаю неправильно? Любая помощь приветствуется! Вот такой JSFiddle
(Пожалуйста, не обращайте внимания на этот текст, редактор говорит, что мой пост - в основном код, поэтому я добавляю текст, не связанный с кодом, в надежде обмануть его ... Я знаю, это непрофессионально.)
Ответы 1
У блоков AmChart должны быть размеры, указанные с помощью CSS, иначе они не будут отображаться. Установите размеры, и все готово, например:
#chart_1, #chart_2, #chart_3 {
width: 300px;
height: 100px;
}
Вам также необходимо настроить логику цикла, когда вы начинаете с chart_0, когда ваши div начинаются с chart_1. Либо обновите свой html, либо исправьте создание строки, например var str = "chart_" + (j + 1); (обратите внимание, что вам не нужен toString())