マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

投稿日:2015年2月2日 更新日:

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを
作成することができる「Chart.js」をご紹介致します。

今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。
表示の瞬間に動きがあるのも特長です。
CSSの設定も特に必要ないので非常に助かります。

デモ

マウスをグラフの上にもっていけばその部分のそれぞれの数値を表示することもできます。

実装方法

初めにJSを設置します。

<script src=”[ファイルへのパス]/Chart.js”></script>

次にそれぞれの数値を設定します。

var lineChartData = {
labels : [“1月”,”2月”,”3月”,”4月”,”5月”,”6月”,”7月”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
pointColor : “rgba(220,220,220,1)”,
pointStrokeColor : “#fff”,
data : [40,20,50,75,90,30,44]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [60,50,90,19,20,40,200]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [20,40,150,40,75,80,100]
}
]
}
var myLine = new Chart(document.getElementById(“chart”).getContext(“2d”)).Line(lineChartData);

各項目の設定は下記を参考にしてください。
labels:下に表示されるラベルの設定
fillColor:数値内の色の設定
strokeColor:境界線の色の設定
pointColor:点の色の設定
pointStrokeColor:点の周りの色の設定
data:それぞれの数値をここで設定

同じグラフ上に重ねていくつも表示できるのでとても便利です。
グラフごとに色を変更することで見やすくなり、数値を変えるだけで変更可能です。
ぜひご活用頂ければと思います。

今回は取り急ぎ、Line chartsのみの説明となります。
いずれ他のグラフの作成の仕方をご説明したいと思います。

2/19 他のグラフ紹介をアップしました。
面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

ファイルのダウンロードは下記からお願い致します。

Chart.js公式サイト
http://www.chartjs.org/


-javascript(jquery), WEB制作

執筆者:


comment

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

関連記事

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る機会がここ最近かなり増えて来ました。 かくいうこのブログもレスポンシブ対応しています。 レスポンシブサイトを作る時には デザイン面等でも気を付ける事は幾つかありますが、 今回は …

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 E:first-child 親要素の最初の子要素であるE要素に適用 E:fi …

ウェブデザインの幅が広がるFREEフォントの紹介

ウェブデザイン作りに当たって、フォントの選択はすごく大事なところであり難しい問題です。 普段、使うフォントってもう決まっていたりしませんか? 私の場合、欧文はHELVETICA,Futuraを和文はモ …

簡単レシピ!アメコミ風デザイン素材と活用法!!

今回はアメコミ風のデザインを作るときに役立つフリー素材と活用法をご紹介いたします。 まずは実際のアメコミを見て、簡単に特徴を分析してみます。 アメコミでgoogle画像検索をかけると、、、 とってもカ …

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook