使用chart.js中的数据表中的用户输入表创建折线图

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<table id="userTable">
  <tr>
    <th>日期</th>
    <th>数值</th>
  </tr>
  <tr>
    <td>2022-01-01</td>
    <td>10</td>
  </tr>
  <tr>
    <td>2022-01-02</td>
    <td>20</td>
  </tr>
  <tr>
    <td>2022-01-03</td>
    <td>15</td>
  </tr>
  <!-- 其他行... -->
</table>

var table = document.getElementById('userTable');
var data = {
  labels: [],
  datasets: [{
    label: '用户输入数据',
    data: [],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

for (var i = 1; i < table.rows.length; i++) {
  var row = table.rows[i];
  var date = row.cells[0].innerHTML;
  var value = parseInt(row.cells[1].innerHTML);
  
  data.labels.push(date);
  data.datasets[0].data.push(value);
}

var ctx = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

<canvas id="lineChart"></canvas>