Chart.js を使用して単純なグラフを作成する方法

あなたのような読者が MUO をサポートします。当社サイトのリンクを使用して商品を購入すると、アフィリエイト手数料が発生する場合があります。続きを読む。

データ主導の意思決定の時代において、人々が理解できる方法でデータを視覚化することは非常に重要です。チャートやグラフは、複雑なデータ、傾向、パターンを簡単に理解するのに役立ちます。

マウスの左クリックが機能しないウィンドウ10

今日のMUOビデオ スクロールしてコンテンツを続けてください

データ視覚化のための人気のある JavaScript ライブラリである Chart.js を使用して、単純なグラフを作成する方法を見てみましょう。

Chart.jsとは何ですか?

チャート.js は、開発者が Web アプリ用のインタラクティブなグラフを作成するのに役立つ無料のツールです。 HTML5 キャンバス要素はグラフをレンダリングし、最新のブラウザーで動作できるようにします。

Chart.jsの特徴

特徴は次のとおりです。

Chart.js は、そのユーザーフレンドリーなアプローチで際立っています。最小限のコードで、開発者はインタラクティブで視覚的に魅力的なグラフを作成できます。
このライブラリは多用途で、折れ線、棒、円、レーダーなどのさまざまな種類のチャートをサポートしています。多様なデータ表現のニーズに対応できます。
Chart.js は、デスクトップおよびモバイルデバイスで適切に機能するグラフを設計します。彼らは反応が良く、順応性があります。
デフォルト設定の代わりに多くのオプションを使用して、Chart.js グラフを変更できます。開発者は、特定の要件に合わせてチャートを微調整できます。

環境のセットアップ

ライブラリは次の 2 つの方法のいずれかでセットアップできます。

CDN の使用。 HTML ドキュメントの先頭に次のスクリプトタグを含めるだけです。
```
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
```
パッケージマネージャーを使用する。パッケージマネージャーを使用したい場合は、次を使用して Chart.js をインストールできます。 npm、ノードパッケージマネージャー :
```
 npm install chart.js
```
または糸:
```
 yarn add chart.js
```

基本的な HTML 構造

グラフを埋め込むには、HTML に Canvas 要素が必要です。基本的な構造は次のとおりです。

 <!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="UTF-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
   <title>Document</title> 
   <link rel="stylesheet" href="./style.css" /> 
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
 </head> 
 
 <body> 
   <h1>Welcome to My Data Representation</h1> 
   <canvas id="myChart" width="400" height="150"></canvas> 
  <script></script> 
 </body> 
</html>

ページのスタイルを設定するには、ファイルを作成します。 スタイル.css に移動し、次の CSS を追加します。

 @import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap"); 
 
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html { 
  font-size: 62.5%; 
} 
 
body { 
  font-family: "Tilt Neon", sans-serif; 
  padding: 2rem 4rem; 
} 
 
h1 { 
  font-size: 3rem; 
  color: #333; 
  text-align: center; 
  padding: 3rem; 
}

初めてのグラフの作成: 棒グラフの例

この例では、カテゴリごとに個々のデータポイントを比較するのに最適な棒グラフを使用します。

の中に脚本 HTML の下部にあるタグを使用して、その id プロパティ:

 let canvas = document.getElementById('myChart'); を使用してキャンバス要素を選択することから始めます。

次に、チャートをレンダリングする方法のコンテキストを取得します。この場合、それは 2D 描画コンテキストです。
```
 let ctx = canvas.getContext('2d');
```
次に、キャンバス上の新しいチャートを初期化します。 チャート（） 関数。この関数は、最初の引数としてキャンバスコンテキストを受け取り、次にチャートに表示するデータを含むオプションのオブジェクトを受け取ります。
```
 let options = {}; 
let myChart = new Chart(canvas, options); 
```

次に、オプションオブジェクトを設定して、グラフに必要なグラフの種類、データ、ラベルを指定します。

 let options = { 
  type: "bar", 
 
  data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
      label: "Total number of votes on favourite color", 
      data: [12, 19, 3, 5, 2, 3], 
    }], 
  }, 
};

現時点では、チャートは次のようになります。

グラフのスタイルとカスタマイズ

Chart.js には、次のようなグラフをカスタマイズするための多数のオプションが用意されています。

色 : Chart.js を使用して、棒の背景から線の境界線までグラフの色をカスタマイズします。
伝説 : わかりやすくするために、凡例を上、下、左、または右に配置します。
ツールチップ : ツールチップを使用して詳細な洞察を得るホバー上に表示されるデータポイント。
アニメーション : 動的表示のチャートアニメーションのスタイルとペースを設定します。

簡単な例として、次のようにオプションオブジェクトを変更することで、データセットのいくつかの基本スタイルを設定できます。

 let options = { 
  type: "bar", 
 
  data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
      label: "Total number of votes on favourite color", 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: "rgba(75, 192, 192, 0.2)", 
      borderColor: "rgba(75, 192, 192, 1)", 
      borderWidth: 1, 
    }], 
  }, 
};

グラフは次のようになります。

ベストプラクティスとパフォーマンスのヒント

グラフのレンダリング時に最適なパフォーマンスを確保するには、次の手順を実行します。

レンダリングを高速化し、ユーザーエクスペリエンスを向上させるために、Chart.js で使用されるデータポイントを制限します。
チャートを頻繁に更新する場合は、新しいチャートをレンダリングする前に、destroy() メソッドを使用して古いチャートを削除します。

よくある落とし穴を回避するためのヒント

避けるべき落とし穴がいくつかあります。

私のiMessageが機能しないのはなぜですか

予期せぬ事態を避けるために、データが常に同じ形式であることを確認してください。
パフォーマンスを向上させるには、アニメーションを制限するのが最善です。これらはユーザーエクスペリエンスの向上に役立ちますが、多すぎると問題が発生する可能性があります。

Chart.js: Web データの視覚化を強化する

Chart.js は、インタラクティブなデータを魅力的な方法で表示したい場合に便利なツールです。洞察を提供し、意思決定に役立つ美しいデータ視覚化を簡単に作成できます。

Chart.js は、開発の経験者でも初心者でも、データを視覚化するための強力なソリューションを提供します。