記事の詳細

Webページで折れ線グラフや棒グラフを表現する方法を調べてみたら「Chart.js」を使った非常に簡単な実装方法があったのでご紹介します。

グラフを作成する際の準備

「Chart.js」を活用する際にはライブラリを読み込む必要があります。
今回はCDN経由でライブラリを読み込んで使ってみます。

実際の実装イメージとしてはこんな感じになります。

上記のスクリプト内の処理を変えることで、棒グラフや折れ線グラフ等を表示していきます。

棒グラフの作成方法

棒グラフを表現する際は下記のようなプログラムになります。
※以降のプログラムはライブラリが読み込み済みであることを想定して記載します。

実際のグラフは下記のようになります。



グラフのスタイルを調整したい場合は、datasets内の項目の数値を変更することで調整ができます。

折れ線グラフの作成方法

折れ線グラフを表現する際は下記のようなプログラムになります。

実際のグラフは下記のようになります。


棒グラフと同じように、グラフのスタイルを調整したい場合はdatasets内の項目の数値を変更することで調整ができます。

棒グラフと折れ線グラフを合わせたグラフの作成方法

棒グラフと折れ線グラフを合わせたグラフを表示する際には、棒グラフのデータに折れ線グラフのデータを追加して表示します。
具体的には、下記のようなプログラムになります。

実際のグラフは下記のようになります。


最初に紹介した棒グラフや折れ線グラフのプログラムとの違いは下記二点になります。

①datasetsの項目にグラフごとのデータを指定する
②グラフのタイプと異なるタイプのグラフを入力する場合は別途指定する

最初に指定したグラフのタイプが棒グラフ(‘bar’)の場合は、datasetsで指定したデータも全て棒グラフとして表示されます。
ですが、個別に別のタイプを指定する事で、違う種類のグラフを混ぜる事ができます。

このように、「Chart.js」を使うことで簡単にグラフの表現ができてしまいます。

今回使用した「Chart.js」はサンプルコードも多いので、カスタマイズする際には他のサイトも参考にしてみてください!
カスタマイズの基本的なことに関しては、下記サイト様で詳しく紹介されていますので、参考にして下さい。
Chart.js · Chart.js 日本語ドキュメント

ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る