如何将动态数据从sql插入到chartjs堆叠条形图javascript中

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

// 创建一个Canvas元素用于显示图表
<canvas id="myChart"></canvas>

// JavaScript代码
<script>
  // 连接到MySQL数据库
  const mysql = require('mysql');
  const connection = mysql.createConnection({
    host: 'localhost',
    user: 'your_username',
    password: 'your_password',
    database: 'your_database'
  });

  // 查询数据
  const query = 'SELECT category, value FROM your_table';
  connection.query(query, (error, results) => {
    if (error) throw error;

    // 处理数据
    const categories = results.map(result => result.category);
    const values = results.map(result => result.value);

    // 准备Chart.js配置
    const chartConfig = {
      type: 'bar',
      data: {
        labels: categories,
        datasets: [{
          label: 'Dynamic Data',
          data: values,
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

    // 创建Chart.js实例
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, chartConfig);

    // 更新数据
    // 假设有一个按钮点击事件来触发数据更新
    document.getElementById('updateButton').addEventListener('click', () => {
      // 查询新的动态数据
      // ...

      // 处理新数据
      // ...

      // 更新Chart.js数据
      myChart.data.labels = newCategories;
      myChart.data.datasets[0].data = newValues;
      myChart.update();
    });
  });
</script>