 50 講」——從本地模型部署到多智能體系統(tǒng)，一年省 87 萬 第 28 課 | 可視化報告：plotly 交互式圖表 + HTML 報告)
第 28 課 | 可視化報告plotly 交互式圖表 HTML 報告數(shù)據(jù)是枯燥的圖表是直觀的。用 plotly 生成交互式圖表嵌入 HTML 報告讓老板一眼看懂數(shù)據(jù)讓分析報告從「可以看」變成「值得看」。一、業(yè)務痛點數(shù)字表格沒人看場景二中Agent 已經能查數(shù)據(jù)、做分析但輸出的是純文本和數(shù)字華東區(qū)銷售額120萬華南區(qū)銷售額100萬華北區(qū)80萬...老板看了 5 秒就關掉了——「重點是什么哪個區(qū)域增長快哪個品類拖后腿」一張好的圖表勝過千言萬語。可視化的價值在于將復雜數(shù)據(jù)轉化為直觀的視覺元素讓決策者瞬間抓住關鍵信息。二、plotly vs matplotlib維度matplotlibplotly交互性無靜態(tài)圖片懸停看數(shù)據(jù)、縮放、框選、篩選Web 集成需要savefig()轉 PNG原生 HTML/JS直接嵌入網(wǎng)頁代碼量較多需要手動調樣式較少默認樣式美觀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四、實戰(zhàn)代碼4.1 柱狀圖多品類對比importplotly.graph_objectsasgo# 數(shù)據(jù)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{地區(qū):[華東,華南,華北,西南,西北],銷售額:[120,100,80,60,40],}figpx.pie(data,values銷售額,names地區(qū),title各區(qū)域銷售額占比,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環(huán)比增長(%),marker_color#10b981),secondary_yTrue,)fig.update_layout(title月度銷售趨勢與環(huán)比增長,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:根據(jù)數(shù)據(jù)特征和問題自動選擇圖表類型CHART_RULES[([對比,排名,vs,比較],bar,柱狀圖),([占比,分布,比例,構成],pie,餅圖),([趨勢,變化,增長,下降,走勢],line,折線圖),([相關,關系,關聯(lián)],scatter,散點圖),([多維,綜合,雷達],radar,雷達圖),]classmethoddefselect(cls,question:str,data_columns:int)-str:自動選擇圖表類型forkeywords,chart_type,_incls.CHART_RULES:ifany(kwinquestionforkwinkeywords):returnchart_type# 根據(jù)數(shù)據(jù)列數(shù)推斷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根據(jù)數(shù)據(jù)特征{data_columns}列選擇{chart_type}圖六、運行cdcode/lesson-28-visualization uvsyncuv run plotly_charts.py七、本課小結可視化將枯燥數(shù)據(jù)轉化為直觀圖表大幅提升報告可讀性plotly 支持交互式圖表比 matplotlib 更適合 Web 展示Agent 可以根據(jù)問題關鍵詞自動選擇圖表類型HTML 報告 文字分析 交互式圖表 專業(yè)美觀的交付物配套代碼code/lesson-28-visualization/plotly_charts.py 「AI Agent 全棧開發(fā) 50 講」——從本地模型部署到多智能體系統(tǒng)，一年省 87 萬 第 28 課 | 可視化報告：plotly 交互式圖表 + HTML 報告
第 28 課 | 可視化報告plotly 交互式圖表 HTML 報告數(shù)據(jù)是枯燥的圖表是直觀的。用 plotly 生成交互式圖表嵌入 HTML 報告讓老板一眼看懂數(shù)據(jù)讓分析報告從「可以看」變成「值得看」。一、業(yè)務痛點數(shù)字表格沒人看場景二中Agent 已經能查數(shù)據(jù)、做分析但輸出的是純文本和數(shù)字華東區(qū)銷售額120萬華南區(qū)銷售額100萬華北區(qū)80萬...老板看了 5 秒就關掉了——「重點是什么哪個區(qū)域增長快哪個品類拖后腿」一張好的圖表勝過千言萬語。可視化的價值在于將復雜數(shù)據(jù)轉化為直觀的視覺元素讓決策者瞬間抓住關鍵信息。二、plotly vs matplotlib維度matplotlibplotly交互性無靜態(tài)圖片懸停看數(shù)據(jù)、縮放、框選、篩選Web 集成需要savefig()轉 PNG原生 HTML/JS直接嵌入網(wǎng)頁代碼量較多需要手動調樣式較少默認樣式美觀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四、實戰(zhàn)代碼4.1 柱狀圖多品類對比importplotly.graph_objectsasgo# 數(shù)據(jù)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{地區(qū):[華東,華南,華北,西南,西北],銷售額:[120,100,80,60,40],}figpx.pie(data,values銷售額,names地區(qū),title各區(qū)域銷售額占比,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環(huán)比增長(%),marker_color#10b981),secondary_yTrue,)fig.update_layout(title月度銷售趨勢與環(huán)比增長,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:根據(jù)數(shù)據(jù)特征和問題自動選擇圖表類型CHART_RULES[([對比,排名,vs,比較],bar,柱狀圖),([占比,分布,比例,構成],pie,餅圖),([趨勢,變化,增長,下降,走勢],line,折線圖),([相關,關系,關聯(lián)],scatter,散點圖),([多維,綜合,雷達],radar,雷達圖),]classmethoddefselect(cls,question:str,data_columns:int)-str:自動選擇圖表類型forkeywords,chart_type,_incls.CHART_RULES:ifany(kwinquestionforkwinkeywords):returnchart_type# 根據(jù)數(shù)據(jù)列數(shù)推斷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根據(jù)數(shù)據(jù)特征{data_columns}列選擇{chart_type}圖六、運行cdcode/lesson-28-visualization uvsyncuv run plotly_charts.py七、本課小結可視化將枯燥數(shù)據(jù)轉化為直觀圖表大幅提升報告可讀性plotly 支持交互式圖表比 matplotlib 更適合 Web 展示Agent 可以根據(jù)問題關鍵詞自動選擇圖表類型HTML 報告 文字分析 交互式圖表 專業(yè)美觀的交付物配套代碼code/lesson-28-visualization/plotly_charts.py