使用flask+echarts+jinja2ajax画图的方法，画一个牛奶和面包的散点图

这篇文章距离上次修改已过251天，其中的内容可能已经有所变动。

首先，确保你已经安装了Flask、ECharts和Jinja2。

以下是一个简单的例子，展示了如何使用Flask、ECharts和AJAX来实现动态更新的散点图。

安装Flask和ECharts：




pip install Flask ECharts

创建Flask应用：




from flask import Flask, render_template, request, jsonify
from jinja2 import Markup
import echarts
 
app = Flask(__name__)
 
# 初始散点图数据
breastfeeding = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
bread = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
 
@app.route('/')
def index():
    # 初始化散点图
    scatter = echarts.Scatter()
    scatter.add('Breastfeeding vs Bread', breastfeeding, bread)
    scatter.set_global_opts(title_opts=echarts.opts.TitleOpts(title='Breastfeeding vs Bread'))
    # 渲染图表到HTML
    chart_html = scatter.render_notebook()
    return render_template('index.html', chart_html=Markup(chart_html))
 
@app.route('/update_data', methods=['POST'])
def update_data():
    # 假设这是一个新的数据更新逻辑
    new_breastfeeding = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]  # 用新数据更新
    new_bread = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]  # 用新数据更新
 
    # 更新散点图数据
    scatter = echarts.Scatter()
    scatter.add('Breastfeeding vs Bread', new_breastfeeding, new_bread)
    scatter.set_global_opts(title_opts=echarts.opts.TitleOpts(title='Breastfeeding vs Bread'))
    # 渲染新的图表数据
    chart_html = scatter.render_notebook()
    return jsonify(chartHTML=Markup(chart_html))
 
if __name__ == '__main__':
    app.run(debug=True)

创建Jinja2模板templates/index.html：




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Breastfeeding vs Bread</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {{ chart_html.body() }}
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <button id="update">Update Data</button>
    <script>
        $(document).ready(function() {
            $('#update').click(function() {
                $.ajax({
                    url: '/update_data',
                    type: 'POST',
                    success: function(response) {
                        $('#main').html(response.chartHTML);
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个例子中，当页面加载完成后，散点图会被渲染显示。点击"Update Data"按钮会通过AJAX请求调用/update_data路由，后端更新数据并返回新的图表HTML，然后前端使用这个HTML更新页面上的图表。这样，你就可以在不刷新页面的情况下更新图表。

使用flask+echarts+jinja2ajax画图的方法，画一个牛奶和面包的散点图

评论已关闭

推荐阅读