Как использовать Chart.js в отдельном js файле
делаю столбчатую диаграмму, когда пишу код для диаграммы в HTML всё работает но если пишу в отдельном JS файле что-то ничего не получается.
В HTML файле (всё прекрасно работает):
<table id="data-table">
<thead>
<tr>
<th>Label</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Category 1</td>
<td>20</td>
</tr>
<tr>
<td>Category 2</td>
<td>30</td>
</tr>
<tr>
<td>Category 3</td>
<td>40</td>
</tr>
</tbody>
</table>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="node_modules/chart.js/dist/chart.umd.js"></script>
<script>
const labels = Array.from(document.querySelectorAll('#data-table tbody td:first-child')).map(e => e.textContent);
const data = Array.from(document.querySelectorAll('#data-table tbody td:last-child')).map(e => +e.textContent);
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Data',
data: data,
backgroundColor: ['red', 'blue', 'green']
}]
},
options: {}
});
</script>
JS отдельно (не работает):
<table id="data-table">
<thead>
<tr>
<th>Label</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Category 1</td>
<td>20</td>
</tr>
<tr>
<td>Category 2</td>
<td>30</td>
</tr>
<tr>
<td>Category 3</td>
<td>40</td>
</tr>
</tbody>
</table>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="node_modules/chart.js/dist/chart.umd.js"></script>
<script type="module" src="chartJS.js"></script>
<script>
import Chart from 'chart.js/auto';
const labels = Array.from(document.querySelectorAll('#data-table tbody td:first-child')).map(e => e.textContent);
const data = Array.from(document.querySelectorAll('#data-table tbody td:last-child')).map(e => +e.textContent);
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Data',
data: data,
backgroundColor: ['red', 'blue', 'green']
}]
},
options: {}
});