很棒的 Chart.js
與 Chart.js 相關的精彩內容的精選列表
Chart.js 支援。目前正在使用三個主要的 Chart.js 版本。請參閱下面的版本徽章來檢查庫是否支援您的 Chart.js 版本。 （另外，「❕」表示不支援該版本。）
- Chart.js v. 4️⃣ — 2022 年 11 月發布
- Chart.js v. 3️⃣ — 2021 年 4 月發布
- Chart.js v. 2️⃣ — 2016 年 4 月發布
資源
圖表
| 支援 | 姓名 | 描述 |
|---|
| 2️⃣❕❕ | 條形漏斗 | 新增條形漏斗圖類型 |
| 2️⃣ 3️⃣ 4️⃣ | 箱線圖 | 新增箱型圖和小提琴圖圖表類型 |
| 2️⃣ 3️⃣ 4️⃣ | 誤差線 | 新增標準圖表類型的多種誤差線變體 |
| 2️⃣ 3️⃣ ❕ | 金融的 | 新增金融圖表類型，例如燭台 |
| ❕ 3️⃣ 4️⃣ | 漏斗 | 新增漏斗圖類型 |
| 2️⃣ 3️⃣ 4️⃣ | 地理 | 新增地理地圖圖表類型，例如等值線圖和氣泡圖 |
| 2️⃣ 3️⃣ 4️⃣ | 圖形 | 新增圖表類型，例如力定向圖 |
| 2️⃣ 3️⃣ 4️⃣ | 矩陣 | 新增矩陣圖類型 |
| 2️⃣ 3️⃣ 4️⃣ | 五氯酚 | 新增平行座標繪圖圖表類型 |
| ❕ 3️⃣ 4️⃣ | 桑基 | 新增桑基圖圖表類型 |
| 2️⃣❕❕ | 史密斯 | 新增史密斯圖類型 |
| 2️⃣ 3️⃣ 4️⃣ | 堆疊100 | 繪製 100% 堆積長條圖 |
| 2️⃣ 3️⃣ 4️⃣ | 樹狀圖 | 新增樹狀圖圖表類型 |
| ❕ 3️⃣ 4️⃣ | 維恩 | 新增維恩圖和歐拉圖類型 |
| ❕ 3️⃣ 4️⃣ | 詞雲 | 新增詞雲圖表類型 |
外掛
造型
| 支援 | 姓名 | 描述 |
|---|
| ❕ 3️⃣ 4️⃣ | 自動著色 | 自動顏色生成 |
| 2️⃣❕❕ | 配色方案 | 使用預先定義的配色方案啟用自動著色 |
| ❕ 3️⃣ 4️⃣ | 坡度 | 簡單的漸變 |
| 2️⃣❕❕ | 粗糙的 | 使用 Rough.js 以類似手繪的粗略風格繪製圖表 |
| 2️⃣❕❕ | 風格 | 提供樣式選項，例如陰影、斜角、發光或疊加效果 |
| ❕❕4️⃣ | 時間堆疊 | 添加具有“良好”時間劃分的固執己見的時間刻度格式 |
特徵
| 支援 | 姓名 | 描述 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 註解 | 在圖表區域上繪製線條、方框、點、標籤、多邊形和橢圓 |
| 2️⃣ 3️⃣ ❕ | 十字線 | 在折線圖和散佈圖中新增資料十字準線 |
| 2️⃣ 3️⃣ 4️⃣ | 數據標籤 | 顯示任何類型圖表的資料標籤 |
| 2️⃣❕❕ | 甜甜圈標籤 | 在圓環圖的中心顯示文字標籤 |
| 2️⃣ 3️⃣ 4️⃣ | 等級制度 | 加入可以折疊、展開和聚焦的分層比例 |
| ❕❕4️⃣ | 影像標籤 | 在圓環圖的數據上顯示圖像標籤 |
| 2️⃣❕❕ | 圓餅圖輸出標籤 | 在圓餅圖/圓環圖外部顯示標籤 |
| 2️⃣❕❕ | 回歸 | 計算並繪製統計迴歸（趨勢線） |
| ❕❕4️⃣ | 趨勢線 | 繪製趨勢線 |
| 2️⃣❕❕ | 瀑布 | 輕鬆使用瀑布圖 |
互動
| 支援 | 姓名 | 描述 |
|---|
| ❕❕4️⃣ | a11y傳奇 | 為圖表圖例提供鍵盤輔助功能 |
| ❕ 3️⃣ 4️⃣ | 圖表2音樂 | 透過鍵盤導航和聲音處理增強圖表的可訪問性 |
| 2️⃣ 3️⃣ 4️⃣ | 延後的 | 推遲初始圖表更新，直到圖表滾動到視口中 |
| 2️⃣ 3️⃣ 4️⃣ | 拖曳數據 | 允許使用者在圖表上拖曳數據點 |
| 2️⃣ 3️⃣ 4️⃣ | 飛漲 | 啟用圖表上的縮放和平移 |
數據來源
| 支援 | 姓名 | 描述 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 資料源-prometheus | 顯示 Prometheus 的時間序列 |
| 2️⃣ 3️⃣ ❕ | 串流媒體 | 新增對即時串流資料的支持 |
此外，許多插件可以在 npm 註冊表中找到。
適配器
| 支援 | 姓名 | 描述 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 日期-fns | 日期-fns 適配器 |
| 2️⃣ 3️⃣ 4️⃣ | 戴傑斯 | Dayjs 適配器 |
| 2️⃣ 3️⃣ 4️⃣ | 勒克森 | 勒克森適配器 |
| 2️⃣ 3️⃣ 4️⃣ | 片刻 | Moment.js 適配器 |
| ❕ 3️⃣ 4️⃣ | 時空 | 時空適配器 |
整合
JavaScript
| 支援 | 姓名 | 描述 |
|---|
| 2️⃣❕❕ | ember-cli-圖表 | 餘燼 CLI |
| ❕❕4️⃣ | 新鮮圖表 | 新鮮的 |
| 2️⃣❕❕ | 輕量級立方體 | 閃電網路元件 |
| 2️⃣ 3️⃣ 4️⃣ | ng2-圖表 | 角度 v2+ |
| 2️⃣ 3️⃣ ❕ | 歐米圖 | 近江 |
| 2️⃣ 3️⃣ 4️⃣ | 反應chartjs-2 | 反應 |
| ❕ 3️⃣ 4️⃣ | 固體圖表 | SolidJs |
| ❕ 3️⃣ 4️⃣ | svelte-chartjs | 斯韋爾特 |
| 2️⃣ 3️⃣ 4️⃣ | vue-chartjs | Vue.js |
其他的
| 支援 | 姓名 | 描述 |
|---|
| ❕3️⃣❕ | BlazorChartjs | 布拉佐爾 |
| ❕ 3️⃣ 4️⃣ | pax.BlazorChartJs | Blazor（具有 JavaScript 隔離） |
| 2️⃣ 3️⃣ 4️⃣ | 查巴 | GWT/J2CL |
| 2️⃣❕❕ | 圖表.java | 爪哇 |
| ❕❕4️⃣ | Chartjs-java-模型 | 爪哇 |
| 2️⃣❕❕ | Chartjs-ocaml | 奧卡米爾 |
| 2️⃣ 3️⃣ ❕ | Chartjs-錯誤 | Ruby，簡化了 Rails 視圖中 Chart.js 的使用 |
| ❕ 3️⃣ 4️⃣ | 圖表-js-rs | Chart.js 在 Rust 中型別 API（Alpha 中的 WIP/不完整） |
| 2️⃣❕❕ | django-chartjs | 薑戈 |
| 菲格瑪 | 設計組件 |
| 2️⃣ 3️⃣ 4️⃣ | ipychart | Python |
| 2️⃣ 3️⃣ 4️⃣ | laravel-chartjs | 拉維爾 |
| 2️⃣❕❕ | 液化 | 使用 Angular 對流資料進行快速、多執行緒視覺化 |
| 2️⃣❕❕ | nova-chartjs | 拉拉維爾·諾瓦 |
| 2️⃣ 3️⃣ 4️⃣ | 快速圖表 | 用於靜態圖表的 Web API |
| 2️⃣❕❕ | 邪惡圖表 | Java Web 應用程式的包裝器 |
| ❕3️⃣❕ | symfony/ux-chartjs | Symfony UX 捆綁包 |
工具
| 支援 | 姓名 | 描述 |
|---|
| ❕3️⃣❕ | 網路中心 | GitHub 頁面上 Chart.js（及更多）的瀏覽器擴充 |
