素晴らしい Chart.js
Chart.js に関連する素晴らしいものの厳選されたリスト
Chart.js のサポート。現在使用されている Chart.js の主要なバージョンは 3 つあります。ライブラリが 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 からの時系列を表示します |
| 2️⃣ 3️⃣ ❕ | ストリーミング | ライブストリーミングデータのサポートを追加 |
さらに、多くのプラグインが npm レジストリにあります。
アダプター
| サポート | 名前 | 説明 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 日付-FNS | date-fnsアダプター |
| 2️⃣ 3️⃣ 4️⃣ | デイジェス | dayjsアダプター |
| 2️⃣ 3️⃣ 4️⃣ | ルクソン | ルクソンアダプター |
| 2️⃣ 3️⃣ 4️⃣ | 一瞬 | Moment.jsアダプター |
| ❕ 3️⃣ 4️⃣ | 時空 | 時空アダプター |
統合
JavaScript
| サポート | 名前 | 説明 |
|---|
| 2️⃣ ❕ ❕ | 残り火-cli-chart | Ember CLI |
| ❕ ❕ 4️⃣ | フレッシュチャート | 新鮮な |
| 2️⃣ ❕ ❕ | lwcc | Lightning Web コンポーネント |
| 2️⃣ 3️⃣ 4️⃣ | ng2 チャート | 角度 v2+ |
| 2️⃣ 3️⃣ ❕ | オミチャート | 近江 |
| 2️⃣ 3️⃣ 4️⃣ | 反応チャートjs-2 | 反応する |
| ❕ 3️⃣ 4️⃣ | ソリッドチャートjs | 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 | OCaml |
| 2️⃣ 3️⃣ ❕ | chartjs-ror | Ruby、Rails ビューでの Chart.js の使用を簡素化 |
| ❕ 3️⃣ 4️⃣ | チャート-js-rs | Chart.js タイプ API (Rust の WIP) (アルファ版の WIP/不完全) |
| 2️⃣ ❕ ❕ | ジャンゴチャートjs | ジャンゴ |
| figma | 設計コンポーネント |
| 2️⃣ 3️⃣ 4️⃣ | アイピーチャート | パイソン |
| 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 (およびその他) のブラウザ拡張機能 |
