Chart.jsを使い倒したいので調査

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

以前に「ccchart」の記事を書いたのですが、同じぐらい良くできていると話を聞く「Chart.js」を使ってみたくなったので、効率的に使えるためにいろいろと調査したいと思います。
 

以前の記事
[Javascript] グラフ表示ライブラリは「ccchart」が便利
 

chart.jsについて

公式サイト : https://www.chartjs.org/
 

ライセンス : The MIT License (MIT)
 

コピーライト : Copyright (c) 2018 Chart.js Contributors
 

特徴 : 非常に軽量で、インストールも操作習得もかなり簡単なので、作業効率化の為に「使わな損」的なツールだそうです。
 

日本語リファレンス : https://misc.0o0o.org/chartjs-doc-ja/

インストール

npmやbowerでのインストール方法がgithubサイトに記述されていますが、WEBページでサクッと使いたい場合は、以下の方法でダウンロードするといいでしょう。
 

1. Githubからzipデータ(プログラムファイル群)をダウンロード
https://github.com/chartjs/Chart.js/archive/master.zip
 

2. root階層にdistフォルダを作成(基本エンジン)
ここに、「Chart.js」(Chart.min.js)と「Chart.bundle.js」(Chart.bundle.min.js)をダウンロード
Chart.js
Chart.min.js
Chart.bundle.js
Chart.bundle.min.js
 

インストールはこれで完了です。
 

githubで落としてきたファイルの中にある「samples」のhtmlファイルをブラウザで開くとそれぞれのグラフサンプルを見ることができます。
 


 

HTML記述して簡単グラフ表示

実際にHTMLファイルにどういう風に記述してグラフ表示できるかを簡単に行ってみます。
 

 


 

リファレンスページに書かれてあるコードをそのまま使ってみましたが非常に簡単にグラフ表示できることがわかります。
 

グラフ表示の起動コマンドは以下の構成になっています。
 

 

少し手抜き気味に設定できる項目を説明してみました。
 

シンプルですね。dataの箇所をcgiと連動したりajax連動することで動的なグラフを作ることができそうです。

タイプ別グラフについて

bar : 棒グラフ

 

line : 折れ線グラフ

 

area : 領域グラフ

 

scatter : 分布図

 

その他 :
パイチャート

 

ドーナツチャート

 

ポーラーエリア

 

レーダーチャート

 

コンボ

 

他にもたくさんの表現が可能なようです。
これは便利ですね。
 

サンプル集

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です