マーカーネット株式会社

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

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

関連記事

サイトリニューアル!する?しない?

こんにちは。web制作初心者のKです! さてさて、今日は初心者の私がサイトを制作するうえで、 「サイトリニューアルの判断材料のひとつ」をお話したいと思います! これは、「BtoC(消費者向け)サイトの …

モバイルフレンドリーでいたい!~素敵サイトレスポンシブの旅~

みなさん、こんにちは! web初心者のKです! この度、googleがモバイルフレンドリーな webサイトのランクを上げるアルゴリズムの変更を発表しましたね! http://www.itmedia.c …

食べ物の写真を美味しそうにみせるフォトショの小ネタ

こんにちは! デザイナーの木野子です。 マーカーネットブログを、今回初めての担当することになりました! ここでは、私が普段web製作で使っている、 PhotoshopやIllustratorの小ネタな …

超簡単!【CSS3】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

PCサイトとスマートフォンサイトを振り分けるjQueryライブラリ<Pc2Sp.js>をHTML4で利用する方法。

PCサイトとスマートフォンサイトを切り替えたい場合、 「Pc2Sp.js」というjQueryライブラリを利用すると実装できます。 このライブラリの紹介はネット上でたくさん見つかると 思いますので、今回 …