マーカーネット株式会社

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

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

関連記事

【Illustrator小技】PDFファイルを代替フォントでなくアウトライン化して開ける便利なワザ

アウトライン化されていないPDFをIllustratorで開こうとする時、 Illustrator「このPDF、該当するフォントがないから代替しちゃいますね~」 デザイナー「うわぁぁフォント変わっちゃ …

オンライン上でPDFファイルをWordファイルに変換する

オンライン上でPDFファイルをWordファイルに変換する

WEBディレクターとして働いていますと、PSDやPNGなどのデザインデータ以外にもパワーポイントやエクセル、PDFなどのファイルなどクライアント様からさまざまな素材をいただいたり、こちらが資料を作成し …

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

jQueryプラグイン「Colorbox」は便利ですが、 さらにWordPressプラグインとして導入すれば 設定は更に簡単になります。 ソースをいじる必要はありませんので初心者にもおすすめです。 W …

Photoshopの、これだけは押さえておきたい便利機能!!

こんばんは! webデザイナーのKです。 しばらくマーカブログに登場できなかったのですが、 みなさま、いかがお過ごしでしょうか? 私はパソコンの不具合、というドキドキハラハラな出来事がありました。 お …