# Chart.js

Chart.jsへようこそ！

Chart.jsを使い始める — Chart.js初心者の方におすすめです。
Chart.js v3 または Chart.js v2からの移行
Discord (新しいウィンドウで開きます) と Twitter (新しいウィンドウで開きます)でコミュニティに参加しましょう。
chart.jsタグを付けて質問を投稿してください。Stack Overflow (新しいウィンドウで開きます)
Chart.jsへの貢献

# なぜChart.jsなのか

JavaScriptアプリケーション開発者向けの多くのチャートライブラリの中でも (新しいウィンドウで開きます)、Chart.jsは現在、GitHubのスター数 (新しいウィンドウで開きます)(約60,000)とnpmダウンロード数 (新しいウィンドウで開きます)(週間約2,400,000)によると最も人気のあるものです。

Chart.jsは2013年に作成され、発表 (新しいウィンドウで開きます)されましたが、それ以来長い道のりを歩んできました。オープンソースであり、非常に許容的なMITライセンス (新しいウィンドウで開きます)の下でライセンスされており、アクティブなコミュニティによって保守されています。

# 機能

Chart.jsは、頻繁に使用されるチャートの種類、プラグイン、およびカスタマイズオプションを提供します。組み込みのチャートの種類の妥当なセットに加えて、コミュニティが保守する追加のチャートの種類 (新しいウィンドウで開きます)を使用できます。さらに、複数のチャートの種類を複合チャートに組み合わせることも可能です（基本的に、同じキャンバス上に複数のチャートの種類をブレンドします）。

Chart.jsは、注釈、ズーム、ドラッグアンドドロップ機能などを作成するためのカスタムプラグイン (新しいウィンドウで開きます)で高度にカスタマイズできます。

# デフォルト

Chart.jsには、堅牢なデフォルト設定が用意されているため、すぐに使い始めることができ、本番環境に対応できるアプリを簡単に作成できます。オプションをまったく指定しなくても、非常に魅力的なチャートが作成される可能性があります。たとえば、Chart.jsではアニメーションがデフォルトで有効になっているため、データで伝えようとしているストーリーにすぐに注目を集めることができます。

# 統合

Chart.jsには、TypeScriptの型定義が組み込まれており、React (新しいウィンドウで開きます)、Vue (新しいウィンドウで開きます)、Svelte (新しいウィンドウで開きます)、Angular (新しいウィンドウで開きます)を含む、人気のあるすべてのJavaScriptフレームワーク (新しいウィンドウで開きます)と互換性があります。Chart.jsを直接使用するか、選択したフレームワークとのよりネイティブな統合を可能にする、よく保守されているラッパーパッケージを利用することができます。

# 開発者エクスペリエンス

Chart.jsは非常に充実したドキュメント（まさに今お読みいただいているもの）、APIリファレンス、そしてサンプルを備えています。メンテナーとコミュニティメンバーは、Discord (新しいウィンドウで開きます)、GitHub Discussions (新しいウィンドウで開きます)、そしてStack Overflow (新しいウィンドウで開きます)などで活発に議論が行われています。Stack Overflowでは11,000件以上の質問がchart.jsタグ付けされています。

# キャンバスレンダリング

Chart.jsは、多くのD3.jsベースのチャートライブラリのようにSVGとしてレンダリングするのではなく、HTML5キャンバス上にチャート要素をレンダリングします。キャンバスレンダリングにより、特に大規模なデータセットや複雑な視覚化において、DOMツリーに数千ものSVGノードが必要となるような場合でも、Chart.jsは非常に高いパフォーマンスを発揮します。同時に、キャンバスレンダリングではCSSスタイリングが許可されないため、組み込みオプションを使用するか、カスタムプラグインまたはチャートタイプを作成して、希望どおりにレンダリングする必要があります。

# パフォーマンス

Chart.jsは大規模なデータセットにも非常に適しています。このようなデータセットは内部形式を使用して効率的に取り込むことができるため、データのパースと正規化をスキップできます。あるいは、データ間引きを設定して、レンダリング前にデータセットをサンプリングし、サイズを削減することもできます。

最終的に、Chart.jsが使用するキャンバスレンダリングは、SVGレンダリングと比較してDOMツリーへの負担を軽減します。また、ツリーシェイキングのサポートにより、バンドルにChart.jsコードの最小限の部分を含めることができ、バンドルサイズとページ読み込み時間を短縮できます。

# コミュニティ

Chart.jsはコミュニティによって積極的に開発・保守されています。約2ヶ月に一度のマイナーリリースと、数年ごとに破壊的変更を含むメジャーリリースを行うことで、新機能の追加と、それについていくことの負担とのバランスを取っています。

はじめに →