使用Python的Flask框架，结合Highchart，动态渲染图表-优快云博客

本文介绍如何使用Python和Flask框架动态渲染Highcharts图表，通过Ajax实现数据的动态加载，展示了具体的代码实现和页面结构，适用于需要实时更新图表数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

服务端动态渲染图表

参考文章链接：https://www.highcharts.com.cn/docs/dynamic-produce-html-page

参考文章是使用php写的，我这边改用python写

具体如下：

1.目录结构：

ajax_demo
    ajax_demo.py
    templates
        -index.html
    static
        -jquery-3.3.1.min.js
        -highcharts-7.0.3.js

2.ajax_demo.py

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def index():
    data = {
        'text1':'对数折线图',
        'data1':[1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
    }
    return render_template('index.html',**data)

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

3..index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个 Highcharts 图表</title>
    <!-- 引入 jquery.js -->
    <script src="static/jquery-3.3.1.min.js"></script>
    <!-- 引入 highcharts.js -->
    <script src="static/highcharts-7.0.3.js"></script>


</head>
<body>

<!-- 图表容器 DOM -->
<div id="container" style="min-width:500px;height:500px"></div>

<script>
    var chart = Highcharts.chart('container', {
        title: {
            text: '{{ text1 }}'
        },
        xAxis: {
            tickInterval: 1
        },
        yAxis: {
            type: 'logarithmic',
            minorTickInterval: 0.1
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br />',
            pointFormat: 'x = {point.x}, y = {point.y}'
        },
        series: [{
            data: {{ data1 }},
            pointStart: 1
        }]
    });

</script>

</body>
</html>