chartjs如何从数据库中动态更新数据(Chartjs无法获取数据)

// 后端接口（示例使用 Node.js 和 Express 框架）
const express = require('express');
const app = express();

// 导入数据库驱动程序或 ORM 库
const db = require('your-database-driver');

// 定义接口路由
app.get('/chart-data', (req, res) => {
  // 连接数据库
  db.connect('your-database-connection-string');

  // 查询数据库
  const query = 'SELECT * FROM your_table';
  db.query(query, (err, result) => {
    if (err) {
      // 处理错误
      console.error(err);
      res.status(500).json({ error: 'Failed to retrieve data from database' });
    } else {
      // 返回数据
      res.json(result);
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

// 前端代码
// 使用 AJAX 或 Fetch API 获取数据
fetch('/chart-data')
  .then(response => response.json())
  .then(data => {
    // 使用 Chart.js 更新图表数据
    const chartData = {
      labels: data.map(item => item.label),
      datasets: [{
        label: 'Chart Data',
        data: data.map(item => item.value),
        backgroundColor: 'rgba(0, 123, 255, 0.5)',
        borderColor: 'rgba(0, 123, 255, 1)',
        borderWidth: 1
      }]
    };

    const chartOptions = {
      responsive: true,
      maintainAspectRatio: false
    };

    const ctx = document.getElementById('chart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: chartData,
      options: chartOptions
    });
  })
  .catch(error => {
    console.error(error);
    // 处理错误
  });