FastAPI后端JSON响应与Chart.js图表生成全攻略

在线计算网 · 发布于 2025-03-23 10:05:03 · 已经有15人使用

引言

在现代Web开发中，前后端分离已成为主流。如何高效地将后端数据在前端展示，是每个开发者必须掌握的技能。本文将详细介绍如何使用FastAPI后端返回的JSON数据，通过Chart.js在前端生成动态图表。

FastAPI简介

FastAPI是一个现代、快速（高性能）的Web框架，用于构建API。它基于标准Python类型提示，具有自动数据验证、生成API文档等强大功能。

Chart.js简介

Chart.js是一个简单、灵活的JavaScript图表库，支持多种图表类型，易于集成和使用。

步骤一：搭建FastAPI后端

1. 安装FastAPI和uvicorn


pip install fastapi uvicorn

2. 创建FastAPI应用


from fastapi import FastAPI
import json

app = FastAPI()

data = {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May"],
    "values": [50, 60, 70, 80, 90]
}

@app.get("/data")
def get_data():
    return data

3. 运行FastAPI服务


uvicorn main:app --reload

步骤二：前端集成Chart.js

1. 引入Chart.js

在HTML文件中引入Chart.js库。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        // JavaScript代码将在此处
    </script>
</body>
</html>

2. 获取JSON数据并生成图表

在<script>标签中编写JavaScript代码，使用fetch API获取后端数据，并使用Chart.js生成图表。


fetch('/data')
    .then(response => response.json())
    .then(data => {
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: [{
                    label: 'Monthly Data',
                    data: data.values,
                    backgroundColor: 'rgba(0, 123, 255, 0.5)',
                    borderColor: 'rgba(0, 123, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });