Как использовать 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: {}
});

Для коментария: Код на данном этаме

введите сюда описание изображения


Ответы (0 шт):