chart.js 读取数据库

Chart.js 是一个流行的 JavaScript 库，用于在网页上创建动态和响应式的图表。要使用 Chart.js 读取数据库并显示数据，通常需要以下几个步骤：

基础概念

Chart.js: 一个开源的 JavaScript 图表库，支持多种图表类型，如折线图、柱状图、饼图等。
数据库: 用于存储和管理数据的系统，常见的有 MySQL、PostgreSQL、MongoDB 等。
后端服务器: 处理客户端请求并与数据库交互的服务器端程序，常用的技术栈包括 Node.js、Python (Django/Flask)、Java (Spring) 等。

类型与应用场景

折线图: 适合展示时间序列数据，如股票价格、温度变化等。
柱状图: 适合对比不同类别的数据，如销售额、用户数量等。
饼图: 适合展示数据的占比关系，如市场份额、性别比例等。

实现步骤

后端服务器: 编写后端代码连接数据库并获取数据。
API 接口: 创建一个 API 接口，供前端调用获取数据。
前端页面: 使用 Chart.js 在前端页面绘制图表，并通过 AJAX 请求调用后端 API 获取数据。

示例代码

后端（Node.js + Express）

const express = require('express');
const mysql = require('mysql');

const app = express();
const port = 3000;

// 创建数据库连接
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Database connected!');
});

// 创建 API 接口
app.get('/api/data', (req, res) => {
  const sql = 'SELECT * FROM your_table';
  db.query(sql, (err, result) => {
    if (err) throw err;
    res.json(result);
  });
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

前端（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="200"></canvas>
  <script>
    async function fetchData() {
      const response = await fetch('/api/data');
      const data = await response.json();
      return data;
    }

    async function renderChart() {
      const ctx = document.getElementById('myChart').getContext('2d');
      const data = await fetchData();

      const chartData = {
        labels: data.map(item => item.label),
        datasets: [{
          label: 'My Dataset',
          data: data.map(item => item.value),
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      };

      const myChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }

    renderChart();
  </script>
</body>
</html>