マーカーネット株式会社

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です。 元々色選びに才能が全くない私は、デザインをする際に色んな参考サイトを メチャクチャ調べてから制作に入ります。 でもどうしても配色だけは …

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

今ではスタティックなWebサイトからでもHTML5と最新のJavaScript環境(各種の既製ライブラリ、フレームワークなど)があれば、相当複雑高度なサービスを提供できますよね。 そんなスタティックな …

中国語サイトのスマートフォンサイト制作 は必要か?必須か?

中国語サイトのスマートフォンサイト制作 は必要か?必須か?

ChiKuu(チークー)という、海外で活躍するスポーツ選手や実業家、アーティストのつぶやきや最新情報などを翻訳してくれるウェブサイトに、新しい表示言語として簡体字中国語が加わりました。 ChiKuu. …

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …

WEBサイトの配色に迷った時の必見サイト!をご紹介。

WEBサイトの配色に迷った時の必見サイト!をご紹介。 http://www.markernet.co.jp/blog/2015/08/10/post-5960/ Facebook