### 将 Jupyter Notebook 中的到课率柱状图部署为网页版可视化 要在 Web 上展示 Jupyter Notebook 中实现的到课率柱状图，可以使用 **Plotly** 或 **Bokeh** 这样的交互式绘图库。以下是具体方法和代码示例。 --- #### 方法一：使用 Plotly 导出 HTML 文件 Plotly 支持将生成的图表导出为独立的 HTML 文件，该文件可以直接嵌入到网页中或作为单独页面打开。 ##### 步骤说明 1. 在 Jupyter Notebook 中编写绘制到课率柱状图的代码。 2. 使用 `plotly.offline.plot()` 或 `fig.write_html()` 将图表保存为 HTML 文件。 3. 嵌入 HTML 文件至目标网页。 ##### 示例代码 ```python import plotly.express as px import pandas as pd # 数据准备 data = { '班级': ['A班', 'B班', 'C班', 'D班'], '到课率 (%)': [85, 90, 78, 88] } df = pd.DataFrame(data) # 绘制柱状图 fig = px.bar( df, x='班级', y='到课率 (%)', title='各班级到课率分布' ) # 将图表保存为HTML文件 fig.write_html("attendance_rate_chart.html") print("图表已成功保存为 attendance_rate_chart.html") ``` 上述代码会生成一个名为 `attendance_rate_chart.html` 的文件[^1]。 ##### 嵌入到网页 将生成的 HTML 文件嵌入到网页中，可以通过 `<iframe>` 标签实现： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>到课率柱状图</title> </head> <body> <h1>各班级到课率分布</h1> <!-- 嵌入生成的HTML图表 --> <iframe src="attendance_rate_chart.html" width="800" height="600" frameborder="0"></iframe> </body> </html> ``` --- #### 方法二：使用 Bokeh 导出静态或动态图表 Bokeh 同样支持将图表导出为 HTML 文件，并提供丰富的自定义选项。 ##### 示例代码 ```python from bokeh.plotting import figure, output_file, save from bokeh.models import ColumnDataSource from bokeh.palettes import Category10 # 数据准备 data = { '班级': ['A班', 'B班', 'C班', 'D班'], '到课率 (%)': [85, 90, 78, 88], '颜色': Category10[4] # 自动分配颜色 } source = ColumnDataSource(data) # 创建图表 p = figure( title="各班级到课率分布", x_range=data['班级'], toolbar_location=None, tools="" ) p.vbar( x='班级', top='到课率 (%)', width=0.9, color='颜色', source=source ) # 设置坐标轴标签 p.xgrid.grid_line_color = None p.y_range.start = 0 p.xaxis.axis_label = "班级" p.yaxis.axis_label = "到课率 (%)" # 输出HTML文件 output_file("attendance_rate_bokeh.html", mode="inline") save(p) print("Bokeh 图表已保存为 attendance_rate_bokeh.html") ``` 同样地，生成的 `attendance_rate_bokeh.html` 文件可通过 `<iframe>` 嵌入到网页中。 --- #### 方法三：Flask 集成动态服务 如果需要更灵活的方式，可以使用 Flask 构建一个小型 Web 应用程序，在服务器端动态生成图表并返回给客户端。 ##### 示例代码 ###### 安装依赖 ```bash pip install flask plotly dash ``` ###### 主应用代码 (`app.py`) ```python from flask import Flask, render_template import plotly.graph_objs as go from plotly.utils import PlotlyJSONEncoder import json app = Flask(__name__) @app.route('/') def index(): # 数据准备 data = { '班级': ['A班', 'B班', 'C班', 'D班'], '到课率 (%)': [85, 90, 78, 88] } # 创建图表对象 fig = go.Figure([ go.Bar( x=data['班级'], y=data['到课率 (%)'] ) ]) fig.update_layout(title_text="各班级到课率分布") # 转换为 JSON 字符串传递给前端 graph_json = json.dumps(fig, cls=PlotlyJSONEncoder) return render_template('index.html', graph_json=graph_json) if __name__ == '__main__': app.run(debug=True) ``` ###### 模板文件 (`templates/index.html`) ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>到课率柱状图</title> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body> <h1>各班级到课率分布</h1> <div id="chart"></div> <script type="text/javascript"> var graphs = {{ graph_json | safe }}; Plotly.newPlot('chart', graphs.data, graphs.layout); </script> </body> </html> ``` 启动 Flask 应用后访问 `http://localhost:5000` 即可查看动态生成的图表。 --- ### 总结 三种方法各有优劣： - **Plotly 导出 HTML**：简单快捷，适合静态展示场景。 - **Bokeh 导出 HTML**：提供更多定制化选项，适用于复杂图表。 - **Flask 动态服务**：灵活性高，适合需要实时更新数据的应用场景。 根据实际需求选择合适的方案即可。 ---