什麼是 Plotly？
Plotly 是一個互動式視覺化函式庫，可用於 Python、JavaScript、R 和其他語言。它使用 D3.js 和 WebGL 在瀏覽器中渲染圖表，即使使用大型數據集也能實現豐富的互動性。Plotly Express (Python) 提供進階 API 用於快速創建圖表，而 plotly.graph_objects 提供精細控制。
- 預設可互動 - 懸停工具提示、縮放、平移、選擇
- Web 原生 - 在瀏覽器和 Jupyter 筆記本中呈現精美
- 跨平台 - Python、JavaScript、R、Julia、MATLAB
- Dash 整合 - 使用 Plotly 圖表構建完整的 Web 儀表板
- 匯出選項 - 靜態圖像 (PNG, SVG, PDF) 或互動式 HTML
使用 Plotly Express 創建基本條形圖 (Python)
Plotly Express 是在 Python 中創建 Plotly 圖表的最快方法。匯入並準備數據後，條形圖只需一行程式碼。這是一個最小範例： ```python import plotly.express as px data = {'Category': ['A', 'B', 'C', 'D'], 'Values': [23, 45, 56, 78]} fig = px.bar(data, x='Category', y='Values', title='基本條形圖') fig.show() ```
- px.bar() 預設創建垂直條形圖
- x 和 y 定義類別列和值列
- fig.show() 渲染互動式圖表
- 適用於 Jupyter 筆記本、Colab、VS Code 和腳本
- 添加 color='列名' 可按類別著色
Plotly 中的水平條形圖
通過設置 orientation='h' 並交換 x 和 y 的賦值來翻轉方向。水平條形圖適用於較長的類別名稱或當您有很多類別時。 ```python fig = px.bar(data, x='Values', y='Category', orientation='h', title='水平條形圖') fig.show() ```
分組（聚類）條形圖
使用 color 參數並排顯示多個系列。Plotly 自動為每個類別分組條形圖。 ```python import plotly.express as px df = px.data.medals_long() # 範例數據集 fig = px.bar(df, x='nation', y='count', color='medal', barmode='group', title='各國奧運獎牌') fig.show() ```
- barmode='group' 將條形圖並排放置
- color 參數將數據拆分為單獨的條形圖系列
- 每種顏色都成為一個圖例項目
- 懸停顯示單個條形圖的詳細資訊
使用 Plotly 創建堆疊條形圖
將 barmode 更改為 'stack' 以創建堆疊條形圖。使用 color 而不指定 barmode 時的預設行為是堆疊。 ```python fig = px.bar(df, x='nation', y='count', color='medal', barmode='stack', title='堆疊奧運獎牌') fig.show() ```
自訂 Plotly 條形圖
Plotly 通過 update_layout() 和 update_traces() 方法提供廣泛的自訂。您可以修改顏色、字體、軸、註釋等。
- fig.update_layout(title_font_size=24) - 調整標題樣式
- fig.update_traces(marker_color='blue') - 更改條形顏色
- fig.update_xaxes(tickangle=45) - 旋轉軸標籤
- color_discrete_sequence=['#1f77b4', '#ff7f0e'] - 自訂調色盤
- fig.add_annotation() - 在任何位置添加文字註釋
JavaScript 中的 Plotly 條形圖
barChartGuides.guides.plotly-bar-chart.content.sections.6.content
添加互動性和動畫
使用 Plotly 預設啟用或通過最少配置啟用的動畫和互動功能來增強使用者體驗。
- 懸停工具提示 - 預設啟用，使用 hovertemplate 自訂
- 點擊事件 - 在 JavaScript 中使用 plotly_click 事件執行自訂操作
- 動畫 - 添加 animation_frame 參數實現動畫過渡
- 範圍滑塊 - 添加 rangeslider 用於時間序列探索
- 按鈕/下拉選單 - 使用 updatemenus 添加 UI 控制項
何時使用 Plotly 與 ChartGen.ai
對於構建互動式儀表板或數據應用程式的開發人員來說，Plotly 非常出色，因為在這些應用程式中，程式化控制至關重要。然而，對於快速視覺化或當您不想編寫程式碼時，ChartGen.ai 提供了一條通往專業圖表的更快路徑。
- 選擇 Plotly 的場景：構建應用程式/儀表板、需要程式化更新、需要複雜的互動性
- 選擇 ChartGen.ai 的場景：快速的一次性圖表、偏好無編碼、需要即時匯出、客戶演示
- ChartGen.ai 的優勢：貼上數據，幾秒鐘內獲得圖表 - 無需函式庫設定
- Plotly 的優勢：完全控制、動畫、自訂點擊處理程序
逐步教學：如何建立Plotly 條形圖：使用 Python 和 JavaScript 創建互動式條形圖
安裝 Plotly
Python：pip install plotly。JavaScript：通過 CDN 包含或 npm install plotly.js。
匯入函式庫
Python：import plotly.express as px。JavaScript：包含 script 標籤或 import 語句。
準備數據
將數據組織為 DataFrame (Python) 或物件陣列 (JavaScript)，包含類別和值列。
創建條形圖
Python：fig = px.bar(df, x='category', y='value')。JavaScript：Plotly.newPlot('div', data)。
自訂外觀
在 Python 中使用 update_layout()、update_traces()，或在 JavaScript 中使用 layout/config 物件。
顯示或匯出
fig.show() 用於互動式顯示，fig.write_image() 用於靜態匯出，或 fig.to_html() 用於嵌入網頁。