Python代码，后端程序

提前安装flask，`pip install flask`

from flask import Flask, jsonify, render_template
import random

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/data')
def get_data():
    # 模拟数据
    line_data = {'labels': ['一月', '二月', '三月', '四月', '五月', '六月'],
                 'datasets': [
                     {'label': '销售额', 'data': [random.randint(1, 100) for i in range(6)]},
                     {'label': '访问量', 'data': [random.randint(1, 100) for i in range(6)]}
                     ],
                 'smooth': True}
    barChartData = {
        'labels': ['产品A', '产品B', '产品C', '产品D', '产品E', '产品F'],
        'datasets': [
            {'label': '2023年销量', 'data': [random.randint(1, 100) for i in range(6)]},
            {'label': '2022年销量', 'data': [random.randint(1, 100) for i in range(6)]}
        ],
        'barGap': '0%'
    }
    return jsonify({
        'lineChartData': line_data,
        'barChartData': barChartData
    })

if __name__ == '__main__':
    app.run(debug=True)

前端HTML文件

index.html文件需放在templates目录下。

<!DOCTYPE html>
<html>
<head>
    <title>Charts with Chart.js</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<style>
    .chart-container {
        width: 1000px;
        height: 500px;
        margin-left: auto;
        margin-right: auto;
    }
</style>
<body>
    <div class="chart-container">
        <canvas id="lineChart"></canvas>
        <canvas id="barChart"></canvas>
    </div>
    <script>
        var ctxLine = document.getElementById('lineChart').getContext('2d');
        var lineChart = new Chart(ctxLine, {
            type: 'line',
            data: {},
            options: {
                title: {
                    display: true,
                    text: 'Line Chart'
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        var ctxBar = document.getElementById('barChart').getContext('2d');
        var barChart = new Chart(ctxBar, {
            type: 'bar',
            data: {},
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        function fetchData() {
            fetch('/data')
                .then(response => response.json())
                .then(data => {
                    lineChart.data = data.lineChartData;
                    lineChart.update();
                    barChart.data = data.barChartData;
                    barChart.update();
                })
                .catch(error => console.error('Error:', error));
        }

        // 初始加载数据
        fetchData();
        // 每5秒更新一次数据
        setInterval(fetchData, 5000);
    </script>
</body>
</html>

运行结果图。

运行Python，浏览器打开127.0.0.1:5000，观察运行结果。

flask+chartjs实现网页图表自动更新_json