第 28 课 | 可视化报告plotly 交互式图表 HTML 报告数据是枯燥的图表是直观的。用 plotly 生成交互式图表嵌入 HTML 报告让老板一眼看懂数据让分析报告从「可以看」变成「值得看」。一、业务痛点数字表格没人看场景二中Agent 已经能查数据、做分析但输出的是纯文本和数字华东区销售额120万华南区销售额100万华北区80万...老板看了 5 秒就关掉了——「重点是什么哪个区域增长快哪个品类拖后腿」一张好的图表胜过千言万语。可视化的价值在于将复杂数据转化为直观的视觉元素让决策者瞬间抓住关键信息。二、plotly vs matplotlib维度matplotlibplotly交互性无静态图片悬停看数据、缩放、框选、筛选Web 集成需要savefig()转 PNG原生 HTML/JS直接嵌入网页代码量较多需要手动调样式较少默认样式美观3D 图表支持支持且可旋转交互动画需要额外库内置动画支持导出格式PNG, PDF, SVGHTML, PNG, PDF, SVG, JSON学习曲线中等低API 更直观结论对于 Web 报告和 Agent 应用plotly 是更好的选择。三、图表类型选择指南是否是否是否是否❓ 用户问题是什么类型对比/排名 柱状图go.Bar / px.bar占比/分布 饼图go.Pie / px.pie趋势/变化 折线图go.Scatter / px.line多维度对比️ 雷达图go.Scatterpolar四、实战代码4.1 柱状图多品类对比importplotly.graph_objectsasgo# 数据categories[电子产品,服装,食品,家居,运动]east_sales[120,80,95,65,50]south_sales[100,90,85,70,45]figgo.Figure(data[go.Bar(name华东,xcategories,yeast_sales,marker_color#4f46e5,texteast_sales,textpositionoutside),go.Bar(name华南,xcategories,ysouth_sales,marker_color#10b981,textsouth_sales,textpositionoutside),])fig.update_layout(title{text:华东 vs 华南 各品类销售额对比,x:0.5,font:{size:20,color:#1e293b},},barmodegroup,xaxis_title品类,yaxis_title销售额万元,templateplotly_white,hovermodex unified,)fig.write_html(sales_comparison.html)4.2 饼图占比分布importplotly.expressaspx data{地区:[华东,华南,华北,西南,西北],销售额:[120,100,80,60,40],}figpx.pie(data,values销售额,names地区,title各区域销售额占比,color_discrete_sequencepx.colors.qualitative.Set2,hole0.3,# 甜甜圈效果)fig.update_traces(textpositioninside,textinfopercentlabel,markerdict(linedict(colorwhite,width2)),)fig.write_html(sales_pie.html)4.3 折线图趋势分析importplotly.graph_objectsasgofromplotly.subplotsimportmake_subplots# 月度趋势months[1月,2月,3月,4月,5月,6月]sales[85,78,92,88,95,102]growth[None,-8.2,17.9,-4.3,8.0,7.4]figmake_subplots(specs[[{secondary_y:True}]])fig.add_trace(go.Scatter(xmonths,ysales,name销售额,modelinesmarkers,linedict(color#4f46e5,width3),markerdict(size8)),secondary_yFalse,)fig.add_trace(go.Bar(xmonths,ygrowth,name环比增长(%),marker_color#10b981),secondary_yTrue,)fig.update_layout(title月度销售趋势与环比增长,templateplotly_white,hovermodex unified,)fig.write_html(sales_trend.html)4.4 嵌入 HTML 报告defgenerate_html_report(title:str,charts:list[dict],analysis_text:str)-str:生成带图表的 HTML 报告chart_divs\n.join([fdiv idchart_{i} stylewidth:100%;height:500px;/divforiinrange(len(charts))])chart_scripts\n.join([fPlotly.newPlot(chart_{i},{chart[data]},{chart[layout]});fori,chartinenumerate(charts)])htmlf!DOCTYPE html html langzh-CN head meta charsetutf-8 title{title}/title script srchttps://cdn.plot.ly/plotly-2.32.0.min.js/script style body {{ font-family: Microsoft YaHei, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; }} h1 {{ color: #1e293b; border-bottom: 3px solid #4f46e5; padding-bottom: 10px; }} h2 {{ color: #334155; margin-top: 30px; }} .analysis {{ background: #f8fafc; padding: 20px; border-radius: 8px; margin: 20px 0; }} .highlight {{ color: #4f46e5; font-weight: bold; }} .footer {{ text-align: center; color: #94a3b8; margin-top: 50px; font-size: 12px; }} /style /head body h1{title}/h1 div classanalysis{analysis_text}/div{chart_divs}div classfooter由 AI Agent 自动生成 |{datetime.now().strftime(%Y-%m-%d %H:%M)}/div script{chart_scripts}/script /body /htmlreturnhtml五、Agent 自动选择图表classChartSelector:根据数据特征和问题自动选择图表类型CHART_RULES[([对比,排名,vs,比较],bar,柱状图),([占比,分布,比例,构成],pie,饼图),([趋势,变化,增长,下降,走势],line,折线图),([相关,关系,关联],scatter,散点图),([多维,综合,雷达],radar,雷达图),]classmethoddefselect(cls,question:str,data_columns:int)-str:自动选择图表类型forkeywords,chart_type,_incls.CHART_RULES:ifany(kwinquestionforkwinkeywords):returnchart_type# 根据数据列数推断ifdata_columns2:returnpie# 标签 值 → 饼图elifdata_columns4:returnbar# 少量对比 → 柱状图else:returnline# 多列 → 折线图classmethoddefexplain(cls,question:str,data_columns:int)-str:解释为什么选择这个图表chart_typecls.select(question,data_columns)forkeywords,ctype,nameincls.CHART_RULES:ifctypechart_type:matched[kwforkwinkeywordsifkwinquestion]ifmatched:returnf检测到关键词「{matched[0]}」选择{name}returnf根据数据特征{data_columns}列选择{chart_type}图六、运行cdcode/lesson-28-visualization uvsyncuv run plotly_charts.py七、本课小结可视化将枯燥数据转化为直观图表大幅提升报告可读性plotly 支持交互式图表比 matplotlib 更适合 Web 展示Agent 可以根据问题关键词自动选择图表类型HTML 报告 文字分析 交互式图表 专业美观的交付物配套代码code/lesson-28-visualization/plotly_charts.py 「AI Agent 全栈开发 50 讲」——从本地模型部署到多智能体系统，一年省 87 万 第 28 课 | 可视化报告：plotly 交互式图表 + HTML 报告
第 28 课 | 可视化报告plotly 交互式图表 HTML 报告数据是枯燥的图表是直观的。用 plotly 生成交互式图表嵌入 HTML 报告让老板一眼看懂数据让分析报告从「可以看」变成「值得看」。一、业务痛点数字表格没人看场景二中Agent 已经能查数据、做分析但输出的是纯文本和数字华东区销售额120万华南区销售额100万华北区80万...老板看了 5 秒就关掉了——「重点是什么哪个区域增长快哪个品类拖后腿」一张好的图表胜过千言万语。可视化的价值在于将复杂数据转化为直观的视觉元素让决策者瞬间抓住关键信息。二、plotly vs matplotlib维度matplotlibplotly交互性无静态图片悬停看数据、缩放、框选、筛选Web 集成需要savefig()转 PNG原生 HTML/JS直接嵌入网页代码量较多需要手动调样式较少默认样式美观3D 图表支持支持且可旋转交互动画需要额外库内置动画支持导出格式PNG, PDF, SVGHTML, PNG, PDF, SVG, JSON学习曲线中等低API 更直观结论对于 Web 报告和 Agent 应用plotly 是更好的选择。三、图表类型选择指南是否是否是否是否❓ 用户问题是什么类型对比/排名 柱状图go.Bar / px.bar占比/分布 饼图go.Pie / px.pie趋势/变化 折线图go.Scatter / px.line多维度对比️ 雷达图go.Scatterpolar四、实战代码4.1 柱状图多品类对比importplotly.graph_objectsasgo# 数据categories[电子产品,服装,食品,家居,运动]east_sales[120,80,95,65,50]south_sales[100,90,85,70,45]figgo.Figure(data[go.Bar(name华东,xcategories,yeast_sales,marker_color#4f46e5,texteast_sales,textpositionoutside),go.Bar(name华南,xcategories,ysouth_sales,marker_color#10b981,textsouth_sales,textpositionoutside),])fig.update_layout(title{text:华东 vs 华南 各品类销售额对比,x:0.5,font:{size:20,color:#1e293b},},barmodegroup,xaxis_title品类,yaxis_title销售额万元,templateplotly_white,hovermodex unified,)fig.write_html(sales_comparison.html)4.2 饼图占比分布importplotly.expressaspx data{地区:[华东,华南,华北,西南,西北],销售额:[120,100,80,60,40],}figpx.pie(data,values销售额,names地区,title各区域销售额占比,color_discrete_sequencepx.colors.qualitative.Set2,hole0.3,# 甜甜圈效果)fig.update_traces(textpositioninside,textinfopercentlabel,markerdict(linedict(colorwhite,width2)),)fig.write_html(sales_pie.html)4.3 折线图趋势分析importplotly.graph_objectsasgofromplotly.subplotsimportmake_subplots# 月度趋势months[1月,2月,3月,4月,5月,6月]sales[85,78,92,88,95,102]growth[None,-8.2,17.9,-4.3,8.0,7.4]figmake_subplots(specs[[{secondary_y:True}]])fig.add_trace(go.Scatter(xmonths,ysales,name销售额,modelinesmarkers,linedict(color#4f46e5,width3),markerdict(size8)),secondary_yFalse,)fig.add_trace(go.Bar(xmonths,ygrowth,name环比增长(%),marker_color#10b981),secondary_yTrue,)fig.update_layout(title月度销售趋势与环比增长,templateplotly_white,hovermodex unified,)fig.write_html(sales_trend.html)4.4 嵌入 HTML 报告defgenerate_html_report(title:str,charts:list[dict],analysis_text:str)-str:生成带图表的 HTML 报告chart_divs\n.join([fdiv idchart_{i} stylewidth:100%;height:500px;/divforiinrange(len(charts))])chart_scripts\n.join([fPlotly.newPlot(chart_{i},{chart[data]},{chart[layout]});fori,chartinenumerate(charts)])htmlf!DOCTYPE html html langzh-CN head meta charsetutf-8 title{title}/title script srchttps://cdn.plot.ly/plotly-2.32.0.min.js/script style body {{ font-family: Microsoft YaHei, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; }} h1 {{ color: #1e293b; border-bottom: 3px solid #4f46e5; padding-bottom: 10px; }} h2 {{ color: #334155; margin-top: 30px; }} .analysis {{ background: #f8fafc; padding: 20px; border-radius: 8px; margin: 20px 0; }} .highlight {{ color: #4f46e5; font-weight: bold; }} .footer {{ text-align: center; color: #94a3b8; margin-top: 50px; font-size: 12px; }} /style /head body h1{title}/h1 div classanalysis{analysis_text}/div{chart_divs}div classfooter由 AI Agent 自动生成 |{datetime.now().strftime(%Y-%m-%d %H:%M)}/div script{chart_scripts}/script /body /htmlreturnhtml五、Agent 自动选择图表classChartSelector:根据数据特征和问题自动选择图表类型CHART_RULES[([对比,排名,vs,比较],bar,柱状图),([占比,分布,比例,构成],pie,饼图),([趋势,变化,增长,下降,走势],line,折线图),([相关,关系,关联],scatter,散点图),([多维,综合,雷达],radar,雷达图),]classmethoddefselect(cls,question:str,data_columns:int)-str:自动选择图表类型forkeywords,chart_type,_incls.CHART_RULES:ifany(kwinquestionforkwinkeywords):returnchart_type# 根据数据列数推断ifdata_columns2:returnpie# 标签 值 → 饼图elifdata_columns4:returnbar# 少量对比 → 柱状图else:returnline# 多列 → 折线图classmethoddefexplain(cls,question:str,data_columns:int)-str:解释为什么选择这个图表chart_typecls.select(question,data_columns)forkeywords,ctype,nameincls.CHART_RULES:ifctypechart_type:matched[kwforkwinkeywordsifkwinquestion]ifmatched:returnf检测到关键词「{matched[0]}」选择{name}returnf根据数据特征{data_columns}列选择{chart_type}图六、运行cdcode/lesson-28-visualization uvsyncuv run plotly_charts.py七、本课小结可视化将枯燥数据转化为直观图表大幅提升报告可读性plotly 支持交互式图表比 matplotlib 更适合 Web 展示Agent 可以根据问题关键词自动选择图表类型HTML 报告 文字分析 交互式图表 专业美观的交付物配套代码code/lesson-28-visualization/plotly_charts.py