統合

Chart.js は、プレーンな JavaScript または様々なモジュールローダーを使用して統合できます。以下の例は、様々なシステムで Chart.js をロードする方法を示しています。

フロントエンドフレームワーク（例：React、Angular、Vue）を使用している場合は、利用可能な統合 (新しいウィンドウで開きます)を参照してください。

スクリプトタグ

<script src="path/to/chartjs/dist/chart.umd.js"></script>
<script>
    const myChart = new Chart(ctx, {...});
</script>

バンドラー（Webpack、Rollup など）

Chart.js はツリーシェイク可能なので、使用するコントローラー、要素、スケール、プラグインをインポートして登録する必要があります。

クイックスタート

バンドルサイズを気にしない場合は、すべての機能が利用可能な`auto`パッケージを使用できます。

import Chart from 'chart.js/auto';

バンドル最適化

バンドルを最適化する場合、アプリケーションに必要なコンポーネントをインポートして登録する必要があります。

オプションは、コントローラー、要素、プラグイン、スケールに分類されます。これらの多くを選択して使用できます。たとえば、ツールチップを使用しない場合は、`Tooltip`プラグインをインポートして登録しないでください。しかし、各チャートの種類には独自の最小限の要件があります（通常は、その種類のコントローラー、そのコントローラーで使用される要素、およびスケール）。

• 棒グラフ
  • BarController
  • BarElement
  • デフォルトのスケール：`CategoryScale`（x）、`LinearScale`（y）
• バブルチャート
  • BubbleController
  • PointElement
  • デフォルトのスケール：`LinearScale`（x/y）
• ドーナツチャート
  • DoughnutController
  • ArcElement
  • スケールを使用しない
• 折れ線グラフ
  • LineController
  • LineElement
  • PointElement
  • デフォルトのスケール：`CategoryScale`（x）、`LinearScale`（y）
• 円グラフ
  • PieController
  • ArcElement
  • スケールを使用しない
• 極座標グラフ
  • PolarAreaController
  • ArcElement
  • デフォルトのスケール：`RadialLinearScale` (r)
• レーダーチャート
  • RadarController
  • LineElement
  • PointElement
  • デフォルトのスケール：`RadialLinearScale` (r)
• 散布図
  • ScatterController
  • PointElement
  • デフォルトのスケール：`LinearScale`（x/y）

利用可能なプラグイン

• 間引き
• `Filler` - `LineElement`によって記述された領域を塗りつぶすために使用されます。面積グラフを参照してください。
• 凡例
• 副題
• タイトル
• ツールチップ

利用可能なスケール

• 直交座標スケール（x/y）

  • CategoryScale
  • LinearScale
  • LogarithmicScale
  • TimeScale
  • TimeSeriesScale

• 極座標スケール（r）

  • RadialLinearScale

ヘルパー関数

ヘルパー関数を使用する場合は、ヘルパーパッケージから個別にインポートし、スタンドアロン関数として使用する必要があります。

バンドラーを使用したイベントをデータ値に変換するの例。

import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';
const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    onClick: (e) => {
      const canvasPosition = getRelativePosition(e, chart);
      // Substitute the appropriate scale IDs
      const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
      const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
    }
  }
});

CommonJS

Chart.js は ESM ライブラリであるため、CommonJS モジュールでは動的な `import` を使用する必要があります。

const { Chart } = await import('chart.js');

RequireJS

重要：RequireJS はAMD モジュール (新しいウィンドウで開きます)しかロードできないため、代わりに UMD ビルドのいずれか（つまり `dist/chart.umd.js`）を require するようにしてください。

require(['path/to/chartjs/dist/chart.umd.js'], function(Chart){
    const myChart = new Chart(ctx, {...});
});

注記

タイムスケールを使用するには、利用可能な日付アダプター (新しいウィンドウで開きます)と対応する日付ライブラリが Chart.js を require した **後** に完全にロードされていることを確認する必要があります。これには、ネストされた require を使用できます。

require(['chartjs'], function(Chart) {
    require(['moment'], function() {
        require(['chartjs-adapter-moment'], function() {
            new Chart(ctx, {...});
        });
    });
});