正文

从零开始：Chart.js结合Express打造交互式图表网页

/0 浏览量
0517

引言

在当今的互联网时代，数据可视化已经成为展示和分析数据的重要手段。Chart.js 是一个基于 HTML5 Canvas 的图表库，它简单易用，功能强大。Express 是一个流行的 Node.js 框架，用于构建高性能的 Web 应用。本文将带您从零开始，使用 Chart.js 和 Express 打造一个交互式图表网页。

环境准备

在开始之前，请确保您的计算机上已安装以下软件：

  • Node.js
  • npm（Node.js 的包管理器）

创建项目

  1. 打开终端，创建一个新的目录，并进入该目录：
mkdir chartjs-express
cd chartjs-express
  1. 初始化项目，并安装必要的依赖：
npm init -y
npm install express chart.js

创建图表数据

在项目根目录下创建一个名为 data.js 的文件，用于存储图表数据：

// data.js
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgba(0, 123, 255, 0.5)',
    borderColor: 'rgba(0, 123, 255, 1)',
    data: [10, 20, 30, 40, 50, 60, 70]
  }]
};

module.exports = data;

创建 Express 应用

在项目根目录下创建一个名为 app.js 的文件，用于创建 Express 应用：

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

创建 HTML 页面

在项目根目录下创建一个名为 public 的文件夹，并在该文件夹中创建一个名为 index.html 的文件：

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js + Express</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div style="width: 50%">
    <canvas id="myChart"></canvas>
  </div>
  <script>
    const data = require('./data.js');
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {}
    });
  </script>
</body>
</html>

运行应用

在终端中运行以下命令启动 Express 应用：

node app.js

打开浏览器，访问 http://localhost:3000，您将看到一个包含交互式图表的网页。

总结

本文介绍了如何使用 Chart.js 和 Express 创建一个交互式图表网页。通过本文的学习，您应该能够掌握以下技能：

  • 使用 Express 创建 Web 应用
  • 使用 Chart.js 创建图表
  • 在网页中展示交互式图表

希望本文对您有所帮助！

-- 展开阅读全文 --