マーカーネット株式会社

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

javascript(jquery) WEB制作

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

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

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。
前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラフ」「鶏頭図(円グラフの一種)」「ドーナツチャート」を作成してみたいと思います。
今回も前回と同じく引き続き「Chart.js」を使用してグラフを作成してみたいと思います。

全グラフ共通の設定

初めにJSを設置します。

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

たったこれだけです。
あとはそれぞれのグラフを設置してみるだけです。

棒グラフの設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

<canvas id=”bar_chart” height=”300″ width=”600″></canvas>

canvasタグで「id」「高さ」「横幅」を設定してください。
「id」は任意の名前を設定してください。

◆ グラフの数値を設定します

var barChartData = {
labels : [“January”,”February”,”March”,”April”,”May”,”June”,”July”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
data : [20,50,40,70,10,90,55]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
data : [40,70,90,10,46,32,99]
}
]
}
var myLine = new Chart(document.getElementById(“bar_chart”).getContext(“2d”)).Bar(barChartData);

getElementByIdに上で設定した「id」を入れてください。

レーダーチャートの設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

<canvas id=”radar_chart” height=”300″ width=”600″></canvas>

◆ グラフの数値を設定します

var radarChartData = {
labels : [“Eating”,”Drinking”,”Sleeping”,”Designing”,”Coding”,”Partying”,”Running”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
pointColor : “rgba(220,220,220,1)”,
pointStrokeColor : “#fff”,
data : [20,40,30,55,90,95,70]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [80,25,75,62,100,10,50]
}
]
}
var myRadar = new Chart(document.getElementById(“radar_chart”).getContext(“2d”)).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});

円グラフの設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

<canvas id=”pie_chart” height=”300″ width=”600″></canvas>

◆ グラフの数値を設定します

var pieData = [
{
value: 40,
color:”#F38630″
},
{
value : 50,
color : “#E0E4CC”
},
{
value : 60,
color : “#69D2E7”
}
];
var myPie = new Chart(document.getElementById(“pie_chart”).getContext(“2d”)).Pie(pieData);

鶏頭図(円グラフの一種)の設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

<canvas id=”polarArea_chart” height=”300″ width=”600″></canvas>

◆ グラフの数値を設定します

var chartData = [
{
value : 100,
color: “#D97041”
},
{
value : 50,
color: “#C7604C”
},
{
value : 20,
color: “#21323D”
},
{
value : 40,
color: “#9D9B7F”
},
{
value : 80,
color: “#7D4F6D”
},
{
value : 55,
color: “#584A5E”
}
];
var myPolarArea = new Chart(document.getElementById(“polarArea_chart”).getContext(“2d”)).PolarArea(chartData);

ドーナツチャートの設定

デモ

実装方法

◆ グラフを入れたい場所にソースを設置します

<canvas id=”doughnut_chart” height=”300″ width=”600″></canvas>

◆ グラフの数値を設定します

var doughnutData = [
{
value: 40,
color:”#F7464A”
},
{
value : 90,
color : “#46BFBD”
},
{
value : 100,
color : “#FDB45C”
},
{
value : 50,
color : “#949FB1”
},
{
value : 20,
color : “#4D5360”
}
];
var myDoughnut = new Chart(document.getElementById(“doughnut_chart”).getContext(“2d”)).Doughnut(doughnutData);

以上、「棒グラフ」「レーダーチャート」「円グラフ」「鶏頭図(円グラフの一種)」「ドーナツチャート」をご紹介致しました。
また、数値を入れる部分に「Math.random()」を使用すると数値をランダムにすることも出来ます。

例)
「Math.floor( Math.random() * 51 )」で0以上51未満
「var randnum = 30 + Math.floor( Math.random() * 21 );」で30以上51未満

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

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


-javascript(jquery), WEB制作

執筆者:


comment

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

関連記事

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …

初心者向けWEBデザイン力強化トレーニング法

学生時代デザインを勉強してきて、いいものを作る、作れる自信を持っている新人さんが驚くことは先輩デザイナーの圧倒的なスピードだと思います。 社会に出ると当然「納期」があり、「自分のペースで」なんてことが …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 スマホサイト編

こんにちは、デザイナーのAです。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その(2) いいデザインと悪いデザインの見分け方 その(3) いいデザインと悪 …

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。 web制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

WordPressのセキュリティを高めてくれるシンプルだけれども実用的なプラグインです。 名前もシンプルです。「AntiVirus」 WordPressで使用しているテーマに悪意のあるコードやセキュリ …