devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

014、Flask模板在数据可视化中的深度应用_可视化用flask做框架把几个图放在一起

作者：人工智能uu | 2024-08-02 12:15:54

赞

踩

可视化用flask做框架把几个图放在一起

目录

Flask模板在数据可视化中的深度应用

1. Flask模板系统简介

1.1 Jinja2模板语法基础

1.2 Flask中渲染模板

2. 静态图表生成

2.1 使用Matplotlib生成图表

3. 交互式图表：使用Charts.js

3.1 创建柱状图

3.2 创建折线图

4. 高级交互式可视化：使用Plotly

4.1 创建散点图

4.2 创建热力图

5. 高级应用：结合多个图表

6. 数据驱动的动态可视化

7. 数据处理与可视化的结合

8. 结合机器学习的可视化

9. 总结

Flask模板在数据可视化中的深度应用

1. Flask模板系统简介

Flask使用Jinja2作为其模板引擎，这是一个功能强大、灵活且易于使用的模板系统。在数据可视化中，Flask模板系统允许我们将后端的数据处理逻辑与前端的展示逻辑分离，从而实现更清晰的代码结构和更高的可维护性。

1.1 Jinja2模板语法基础

Jinja2使用{{ }}来输出变量，{% %}来编写控制结构。例如：

<h1>{{ title }}</h1>
<ul>
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}
</ul>

1.2 Flask中渲染模板

在Flask应用中，我们使用render_template函数来渲染模板：

  1. from flask import Flask, render_template
  2. ​
  3. app = Flask(__name__)
  4. ​
  5. @app.route('/')
  6. def index():
  7.     data = {
  8.         'title': '数据可视化示例',
  9.         'items': ['图表1', '图表2', '图表3']
  10.     }
  11.     return render_template('index.html', **data)

2. 静态图表生成

首先，我们来看如何使用Flask模板生成静态图表。我们将使用Matplotlib库来生成图表，然后将其嵌入到Flask模板中。

2.1 使用Matplotlib生成图表

  1. import io
  2. import base64
  3. import matplotlib.pyplot as plt
  4. from flask import Flask, render_template
  5. ​
  6. app = Flask(__name__)
  7. ​
  8. def generate_plot():
  9.     plt.figure(figsize=(10, 6))
  10.     plt.plot([1, 2, 3, 4], [1, 4, 2, 3])
  11.     plt.title('示例折线图')
  12.     plt.xlabel('X轴')
  13.     plt.ylabel('Y轴')
  14.     
  15.     img = io.BytesIO()
  16.     plt.savefig(img, format='png')
  17.     img.seek(0)
  18.     plot_url = base64.b64encode(img.getvalue()).decode()
  19.     return plot_url
  20. ​
  21. @app.route('/static-plot')
  22. def static_plot():
  23.     plot_url = generate_plot()
  24.     return render_template('static_plot.html', plot_url=plot_url)

对应的static_plot.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>静态图表示例</title>
  5. </head>
  6. <body>
  7.     <h1>Matplotlib生成的静态图表</h1>
  8.     <img src="data:image/png;base64,{{ plot_url }}">
  9. </body>
  10. </html>

这个例子展示了如何在Flask后端生成图表，然后将其作为base64编码的图像传递给前端模板。这种方法适用于简单的、不需要交互的图表。

3. 交互式图表：使用Charts.js

接下来，我们将探讨如何使用Charts.js库来创建交互式图表。Charts.js是一个流行的JavaScript图表库，它提供了丰富的图表类型和交互选项。

3.1 创建柱状图

  1. from flask import Flask, render_template, jsonify
  2. import random
  3. ​
  4. app = Flask(__name__)
  5. ​
  6. @app.route('/bar-chart')
  7. def bar_chart():
  8.     labels = ['红色', '蓝色', '黄色', '绿色', '紫色']
  9.     values = [random.randint(10, 100) for _ in range(5)]
  10.     return render_template('bar_chart.html', labels=labels, values=values)
  11. ​
  12. @app.route('/update-bar-data')
  13. def update_bar_data():
  14.     values = [random.randint(10, 100) for _ in range(5)]
  15.     return jsonify(values=values)

对应的bar_chart.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>交互式柱状图</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  6.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  7. </head>
  8. <body>
  9.     <canvas id="barChart" width="400" height="200"></canvas>
  10.     <button onclick="updateChart()">更新数据</button>
  11. ​
  12.     <script>
  13.     var ctx = document.getElementById('barChart').getContext('2d');
  14.     var myChart = new Chart(ctx, {
  15.         type: 'bar',
  16.         data: {
  17.             labels: {{ labels | tojson }},
  18.             datasets: [{
  19.                 label: '颜色数量',
  20.                 data: {{ values | tojson }},
  21.                 backgroundColor: [
  22.                     'rgba(255, 99, 132, 0.6)',
  23.                     'rgba(54, 162, 235, 0.6)',
  24.                     'rgba(255, 206, 86, 0.6)',
  25.                     'rgba(75, 192, 192, 0.6)',
  26.                     'rgba(153, 102, 255, 0.6)'
  27.                 ]
  28.             }]
  29.         },
  30.         options: {
  31.             responsive: true,
  32.             scales: {
  33.                 y: {
  34.                     beginAtZero: true
  35.                 }
  36.             }
  37.         }
  38.     });
  39. ​
  40.     function updateChart() {
  41.         $.getJSON('/update-bar-data', function(data) {
  42.             myChart.data.datasets[0].data = data.values;
  43.             myChart.update();
  44.         });
  45.     }
  46.     </script>
  47. </body>
  48. </html>

这个例子展示了如何创建一个交互式的柱状图，并通过AJAX请求动态更新数据。用户可以点击"更新数据"按钮来刷新图表，而无需重新加载整个页面。

3.2 创建折线图

接下来，我们来创建一个折线图，展示一段时间内的数据趋势：

  1. from flask import Flask, render_template, jsonify
  2. import random
  3. from datetime import datetime, timedelta
  4. ​
  5. app = Flask(__name__)
  6. ​
  7. def generate_time_series_data(days=30):
  8.     end_date = datetime.now()
  9.     start_date = end_date - timedelta(days=days)
  10.     dates = [(start_date + timedelta(days=i)).strftime('%Y-%m-%d') for i in range(days)]
  11.     values = [random.randint(50, 200) for _ in range(days)]
  12.     return dates, values
  13. ​
  14. @app.route('/line-chart')
  15. def line_chart():
  16.     dates, values = generate_time_series_data()
  17.     return render_template('line_chart.html', dates=dates, values=values)
  18. ​
  19. @app.route('/update-line-data')
  20. def update_line_data():
  21.     _, values = generate_time_series_data()
  22.     return jsonify(values=values)

对应的line_chart.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>交互式折线图</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  6.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  7. </head>
  8. <body>
  9.     <canvas id="lineChart" width="800" height="400"></canvas>
  10.     <button onclick="updateChart()">更新数据</button>
  11. ​
  12.     <script>
  13.     var ctx = document.getElementById('lineChart').getContext('2d');
  14.     var myChart = new Chart(ctx, {
  15.         type: 'line',
  16.         data: {
  17.             labels: {{ dates | tojson }},
  18.             datasets: [{
  19.                 label: '每日数据',
  20.                 data: {{ values | tojson }},
  21.                 borderColor: 'rgb(75, 192, 192)',
  22.                 tension: 0.1
  23.             }]
  24.         },
  25.         options: {
  26.             responsive: true,
  27.             scales: {
  28.                 x: {
  29.                     type: 'time',
  30.                     time: {
  31.                         unit: 'day'
  32.                     }
  33.                 },
  34.                 y: {
  35.                     beginAtZero: true
  36.                 }
  37.             }
  38.         }
  39.     });
  40. ​
  41.     function updateChart() {
  42.         $.getJSON('/update-line-data', function(data) {
  43.             myChart.data.datasets[0].data = data.values;
  44.             myChart.update();
  45.         });
  46.     }
  47.     </script>
  48. </body>
  49. </html>

这个折线图示例展示了如何处理时间序列数据，并使用Charts.js的时间轴功能来正确显示日期。

4. 高级交互式可视化：使用Plotly

Plotly是另一个强大的JavaScript可视化库，它提供了更多的交互性和更复杂的图表类型。让我们使用Plotly创建一个散点图和热力图。

4.1 创建散点图

  1. import plotly
  2. import plotly.graph_objs as go
  3. import pandas as pd
  4. import json
  5. ​
  6. app = Flask(__name__)
  7. ​
  8. @app.route('/scatter-plot')
  9. def scatter_plot():
  10.     # 假设我们有一个包含身高、体重和年龄数据的DataFrame
  11.     df = pd.DataFrame({
  12.         'height': [165, 170, 175, 180, 185, 190],
  13.         'weight': [60, 65, 70, 75, 80, 85],
  14.         'age': [25, 30, 35, 40, 45, 50]
  15.     })
  16. ​
  17.     trace = go.Scatter(
  18.         x=df['height'],
  19.         y=df['weight'],
  20.         mode='markers',
  21.         marker=dict(
  22.             size=df['age'],
  23.             color=df['age'],
  24.             colorscale='Viridis',
  25.             showscale=True
  26.         ),
  27.         text=df['age'],
  28.         hoverinfo='text'
  29.     )
  30. ​
  31.     layout = go.Layout(
  32.         title='身高与体重的关系（气泡大小表示年龄）',
  33.         xaxis=dict(title='身高 (cm)'),
  34.         yaxis=dict(title='体重 (kg)')
  35.     )
  36. ​
  37.     fig = go.Figure(data=[trace], layout=layout)
  38.     graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
  39.     return render_template('scatter_plot.html', graphJSON=graphJSON)

对应的scatter_plot.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Plotly散点图示例</title>
  5.     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  6. </head>
  7. <body>
  8.     <div id="chart" style="width:100%;height:600px;"></div>
  9.     <script>
  10.         var graphs = {{graphJSON | safe}};
  11.         Plotly.newPlot('chart', graphs);
  12.     </script>
  13. </body>
  14. </html>

这个散点图展示了如何使用Plotly创建多维数据可视化，其中点的位置表示身高和体重，而点的大小和颜色表示年龄。

4.2 创建热力图

接下来，让我们创建一个热力图来展示某个城市一周内每小时的温度变化：

  1. import plotly
  2. import plotly.graph_objs as go
  3. import pandas as pd
  4. import numpy as np
  5. import json
  6. ​
  7. app = Flask(__name__)
  8. ​
  9. @app.route('/heatmap')
  10. def heatmap():
  11.     # 生成模拟数据
  12.     hours = 24
  13.     days = 7
  14.     z = np.random.randint(10, 30, size=(days, hours))
  15.     
  16.     data = go.Heatmap(
  17.         z=z,
  18.         x=[f'{i}:00' for i in range(24)],
  19.         y=['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  20.         colorscale='Viridis'
  21.     )
  22. ​
  23.     layout = go.Layout(
  24.         title='一周温度变化热力图',
  25.         xaxis=dict(title='小时'),
  26.         yaxis=dict(title='星期')
  27.     )
  28. ​
  29.     fig = go.Figure(data=[data], layout=layout)
  30.     graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
  31.     return render_template('heatmap.html', graphJSON=graphJSON)

对应的heatmap.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Plotly热力图示例</title>
  5.     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  6. </head>
  7. <body>
  8.     <div id="chart" style="width:100%;height:600px;"></div>
  9.     <script>
  10.         var graphs = {{graphJSON | safe}};
  11.         Plotly.newPlot('chart', graphs);
  12.     </script>
  13. </body>
  14. </html>

这个热力图展示了如何使用Plotly创建复杂的二维数据可视化，非常适合展示时间序列或矩阵形式的数据。

5. 高级应用：结合多个图表

在实际应用中，我们经常需要在一个页面上展示多个相关的图表。下面我们将创建一个仪表板，同时显示多个图表：

  1. import plotly
  2. import plotly.graph_objs as go
  3. import pandas as pd
  4. import numpy as np
  5. import json
  6. ​
  7. app = Flask(__name__)
  8. ​
  9. def create_bar_chart():
  10.     categories = ['A', 'B', 'C', 'D', 'E']
  11.     values = np.random.randint(10, 100, size=5)
  12.     
  13.     data = go.Bar(x=categories, y=values)
  14.     layout = go.Layout(title='类别分布')
  15.     
  16.     return go.Figure(data=[data], layout=layout)
  17. ​
  18. def create_pie_chart():
  19.     labels = ['产品1', '产品2', '产品3', '产品4']
  20.     values = np.random.randint(100, 1000, size=4)
  21.     
  22.     data = go.Pie(labels=labels, values=values)
  23.     layout = go.Layout(title='产品销售占比')
  24.     
  25.     return go.Figure(data=[data], layout=layout)
  26. ​
  27. def create_line_chart():
  28.     dates = pd.date_range(start='2023-01-01', end='2023-12-31', freq='M')
  29.     values = np.cumsum(np.random.randn(12))
  30.     
  31.     data = go.Scatter(x=dates, y=values, mode='lines+markers')
  32.     layout = go.Layout(title='月度趋势')
  33.     
  34.     return go.Figure(data=[data], layout=layout)
  35. ​
  36. @app.route('/dashboard')
  37. def dashboard():
  38.     bar_chart = create_bar_chart()
  39.     pie_chart = create_pie_chart()
  40.     line_chart = create_line_chart()
  41.     
  42.     charts = {
  43.         'bar': json.dumps(bar_chart, cls=plotly.utils.PlotlyJSONEncoder),
  44.         'pie': json.dumps(pie_chart, cls=plotly.utils.PlotlyJSONEncoder),
  45.         'line': json.dumps(line_chart, cls=plotly.utils.PlotlyJSONEncoder)
  46.     }
  47.     
  48.     return render_template('dashboard.html', charts=charts)      

对应的dashboard.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>数据可视化仪表板</title>
  5.     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  6.     <style>
  7.         .chart-container {
  8.             width: 45%;
  9.             height: 400px;
  10.             display: inline-block;
  11.             margin: 10px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <h1>数据可视化仪表板</h1>
  17.     <div class="chart-container" id="bar-chart"></div>
  18.     <div class="chart-container" id="pie-chart"></div>
  19.     <div class="chart-container" id="line-chart"></div>
  20. ​
  21.     <script>
  22.         var barChart = JSON.parse({{ charts.bar | tojson | safe }});
  23.         var pieChart = JSON.parse({{ charts.pie | tojson | safe }});
  24.         var lineChart = JSON.parse({{ charts.line | tojson | safe }});
  25. ​
  26.         Plotly.newPlot('bar-chart', barChart.data, barChart.layout);
  27.         Plotly.newPlot('pie-chart', pieChart.data, pieChart.layout);
  28.         Plotly.newPlot('line-chart', lineChart.data, lineChart.layout);
  29.     </script>
  30. </body>
  31. </html>

这个仪表板示例展示了如何在一个页面中组合多个图表，为用户提供全面的数据概览。

6. 数据驱动的动态可视化

在实际应用中，我们通常需要处理大量实时更新的数据。下面我们将创建一个股票价格实时监控系统，展示如何使用Flask和WebSocket来实现实时数据可视化。

首先，安装必要的库：

pip install flask-socketio

然后，创建以下Python文件：

  1. from flask import Flask, render_template
  2. from flask_socketio import SocketIO
  3. import json
  4. import random
  5. import time
  6. from threading import Thread
  7. ​
  8. app = Flask(__name__)
  9. app.config['SECRET_KEY'] = 'secret!'
  10. socketio = SocketIO(app)
  11. ​
  12. def generate_stock_data():
  13.     stocks = ['AAPL', 'GOOGL', 'MSFT', 'AMZN']
  14.     while True:
  15.         data = {stock: random.randint(100, 200) for stock in stocks}
  16.         socketio.emit('stock_update', json.dumps(data))
  17.         time.sleep(1)
  18. ​
  19. @app.route('/')
  20. def index():
  21.     return render_template('stock_monitor.html')
  22. ​
  23. if __name__ == '__main__':
  24.     Thread(target=generate_stock_data).start()
  25.     socketio.run(app, debug=True)

创建对应的stock_monitor.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>实时股票价格监控</title>
  5.     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  6.     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
  7. </head>
  8. <body>
  9.     <div id="chart" style="width:100%;height:600px;"></div>
  10. ​
  11.     <script>
  12.         var socket = io();
  13.         var time = new Date();
  14. ​
  15.         var trace1 = {x: [time], y: [0], name: 'AAPL', mode: 'lines+markers'};
  16.         var trace2 = {x: [time], y: [0], name: 'GOOGL', mode: 'lines+markers'};
  17.         var trace3 = {x: [time], y: [0], name: 'MSFT', mode: 'lines+markers'};
  18.         var trace4 = {x: [time], y: [0], name: 'AMZN', mode: 'lines+markers'};
  19. ​
  20.         var data = [trace1, trace2, trace3, trace4];
  21.         var layout = {title: '实时股票价格', xaxis: {title: '时间'}, yaxis: {title: '价格'}};
  22. ​
  23.         Plotly.newPlot('chart', data, layout);
  24. ​
  25.         socket.on('stock_update', function(msg) {
  26.             var data = JSON.parse(msg);
  27.             var time = new Date();
  28. ​
  29.             var update = {
  30.                 x: [[time], [time], [time], [time]],
  31.                 y: [[data.AAPL], [data.GOOGL], [data.MSFT], [data.AMZN]]
  32.             }
  33. ​
  34.             Plotly.extendTraces('chart', update, [0, 1, 2, 3]);
  35. ​
  36.             if(time - data[0].x[0] > 30000) {
  37.                 Plotly.relayout('chart', {
  38.                     xaxis: {
  39.                         range: [time - 30000, time]
  40.                     }
  41.                 });
  42.             }
  43.         });
  44.     </script>
  45. </body>
  46. </html>

这个示例展示了如何使用Flask-SocketIO创建一个实时更新的股票价格监控系统。服务器每秒生成新的股票价格数据并通过WebSocket发送给客户端，客户端接收数据后实时更新图表。

7. 数据处理与可视化的结合

在实际应用中，我们经常需要对原始数据进行处理后再进行可视化。下面我们将创建一个简单的数据分析和可视化系统，展示如何在Flask中结合数据处理和可视化。

  1. from flask import Flask, render_template, request
  2. import pandas as pd
  3. import plotly
  4. import plotly.express as px
  5. import json
  6. ​
  7. app = Flask(__name__)
  8. ​
  9. @app.route('/', methods=['GET', 'POST'])
  10. def index():
  11.     if request.method == 'POST':
  12.         file = request.files['file']
  13.         if file:
  14.             df = pd.read_csv(file)
  15.             
  16.             # 数据处理
  17.             df['Total'] = df['Quantity'] * df['UnitPrice']
  18.             top_countries = df.groupby('Country')['Total'].sum().nlargest(10).index.tolist()
  19.             df_top = df[df['Country'].isin(top_countries)]
  20.             
  21.             # 创建图表
  22.             fig1 = px.bar(df_top.groupby('Country')['Total'].sum().reset_index(), 
  23.                           x='Country', y='Total', title='Top 10 Countries by Sales')
  24.             
  25.             fig2 = px.scatter(df_top, x='Quantity', y='UnitPrice', color='Country', 
  26.                               size='Total', hover_data=['Description'],
  27.                               title='Quantity vs Unit Price by Country')
  28.             
  29.             # 将图表转换为JSON
  30.             chart1JSON = json.dumps(fig1, cls=plotly.utils.PlotlyJSONEncoder)
  31.             chart2JSON = json.dumps(fig2, cls=plotly.utils.PlotlyJSONEncoder)
  32.             
  33.             return render_template('analysis.html', chart1JSON=chart1JSON, chart2JSON=chart2JSON)
  34.     
  35.     return render_template('upload.html')

创建upload.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>数据上传</title>
  5. </head>
  6. <body>
  7.     <h1>上传CSV文件进行分析</h1>
  8.     <form method="post" enctype="multipart/form-data">
  9.         <input type="file" name="file" accept=".csv">
  10.         <input type="submit" value="上传并分析">
  11.     </form>
  12. </body>
  13. </html>

创建analysis.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>数据分析结果</title>
  5.     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  6. </head>
  7. <body>
  8.     <h1>数据分析结果</h1>
  9.     <div id="chart1" style="width:100%;height:500px;"></div>
  10.     <div id="chart2" style="width:100%;height:500px;"></div>
  11. ​
  12.     <script>
  13.         var chart1 = JSON.parse({{ chart1JSON | tojson | safe }});
  14.         var chart2 = JSON.parse({{ chart2JSON | tojson | safe }});
  15. ​
  16.         Plotly.newPlot('chart1', chart1.data, chart1.layout);
  17.         Plotly.newPlot('chart2', chart2.data, chart2.layout);
  18.     </script>
  19. </body>
  20. </html>

这个示例展示了如何创建一个简单的数据分析和可视化系统。用户可以上传CSV文件，系统会对数据进行简单的处理，然后创建两个图表：一个柱状图显示销售额最高的10个国家，一个散点图显示数量与单价的关系。

8. 结合机器学习的可视化

最后，让我们探索如何将机器学习模型的结果与数据可视化结合起来。我们将创建一个简单的聚类分析可视化系统。

首先，安装必要的库：

pip install scikit-learn

然后，创建以下Python文件：

  1. from flask import Flask, render_template, request
  2. import pandas as pd
  3. import numpy as np
  4. from sklearn.cluster import KMeans
  5. from sklearn.preprocessing import StandardScaler
  6. import plotly.express as px
  7. import json
  8. ​
  9. app = Flask(__name__)
  10. ​
  11. @app.route('/', methods=['GET', 'POST'])
  12. def index():
  13.     if request.method == 'POST':
  14.         file = request.files['file']
  15.         if file:
  16.             df = pd.read_csv(file)
  17.             
  18.             # 数据预处理
  19.             features = ['Annual Income (k$)', 'Spending Score (1-100)']
  20.             X = df[features]
  21.             scaler = StandardScaler()
  22.             X_scaled = scaler.fit_transform(X)
  23.             
  24.             # 聚类分析
  25.             kmeans = KMeans(n_clusters=5, random_state=42)
  26.             df['Cluster'] = kmeans.fit_predict(X_scaled)
  27.             
  28.             # 创建图表
  29.             fig = px.scatter(df, x='Annual Income (k$)', y='Spending Score (1-100)', 
  30.                              color='Cluster', hover_data=['Age', 'Gender'],
  31.                              title='Customer Segmentation')
  32.             
  33.             # 将图表转换为JSON
  34.             chartJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
  35.             
  36.             return render_template('cluster_result.html', chartJSON=chartJSON)
  37.     
  38.     return render_template('upload_for_clustering.html')

创建upload_for_clustering.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>上传数据进行聚类分析</title>
  5. </head>
  6. <body>
  7.     <h1>上传CSV文件进行聚类分析</h1>
  8.     <form method="post" enctype="multipart/form-data">
  9.         <input type="file" name="file" accept=".csv">
  10.         <input type="submit" value="上传并分析">
  11.     </form>
  12. </body>
  13. </html>

创建cluster_result.html模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>聚类分析结果</title>
  5.     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  6. </head>
  7. <body>
  8.     <h1>聚类分析结果</h1>
  9.     <div id="chart" style="width:100%;height:600px;"></div>
  10. ​
  11.     <script>
  12.         var chart = JSON.parse({{ chartJSON | tojson | safe }});
  13.         Plotly.newPlot('chart', chart.data, chart.layout);
  14.     </script>
  15. </body>
  16. </html>

这个示例展示了如何创建一个简单的聚类分析可视化系统。用户上传包含客户数据的CSV文件后，系统会使用K-means算法进行聚类分析，然后创建一个散点图来可视化聚类结果。

9. 总结

通过这些详细的示例，我们展示了Flask模板在数据可视化中的多种应用场景：

  1. 基础的静态图表生成

  2. 使用Charts.js创建交互式图表

  3. 使用Plotly创建高级交互式可视化

  4. 创建包含多个图表的仪表板

  5. 实现实时数据的动态可视化

  6. 结合数据处理和可视化

  7. 将机器学习模型的结果可视化

Flask的灵活性使得它能够适应各种数据可视化需求，从简单的静态图表到复杂的交互式可视化，再到实时数据的动态展示。通过合理使用模板系统，我们可以将后端的数据处理逻辑与前端的展示逻辑分离，提高代码的可维护性和可扩展性。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号