マーカーネット株式会社

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

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

関連記事

WEBサイトの配色に迷った時の必見サイト!

こんばんは! 本日社内で勉強の一環で某テストを受けた、風邪気味のKです! 夏休みも目前!早く元気になりたい! さてさて、このところお仕事をさせていただいている際、 セオリーにハマった色使いを真似ている …

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

近ごろのニュースで、訪日観光客の増加という記事をよく見かけるようになりました。東京の街を歩いても日本への訪日客が増えたことを実感できるほど外国語が飛び交ってますね。2015年は【多言語化元年】と言われ …

javascriptの便利なライブラリについて

javascriptの便利なライブラリについて

オブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。 そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。 1. underscore.js …

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-3-

約3週間に1回の登場になりますが、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。 今回は最終回となりますので、最後まで読んでいただけれ …

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

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …