Chart.js 是一个流行的 JavaScript 库,用于在网页上创建动态和响应式的图表。要使用 Chart.js 读取数据库并显示数据,通常需要以下几个步骤:
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}`);
});
<!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>
通过以上步骤和示例代码,你应该能够成功地将 Chart.js 与数据库结合使用,实现动态数据的可视化展示。
没有搜到相关的文章