マーカーネット株式会社

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

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

関連記事

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

日頃WEBデザインの仕事に携わる関係上、素材サイト巡りをすることがよくあります。 その中で、最近面白いなと思ったサイトをご紹介したいと思います。   ヒューマンピクトグラム2.0 http: …

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

WordPressをインストールするとユーザー名「admin」が自動的に割り振られ 変更できないバージョンもございました。 ハッキングする側はパスワードを当てるだけでログインすることが可能になります。 …

WEBサイト外注業者の選択法① 一言で質問テスト編!

現代ビジネスにおいて切っても切れなくなったウェブサイトでの企業活動の重要性ですが、そんな重要であるwEBサイトをどこに外注するのか、少なくとも一度は迷ったこともあると思います。 もちろん何をWEB制作 …

【Illustrator】写真を簡単にモノクロベクター画像にする方法

【Illustrator】写真を簡単にモノクロベクター画像にする方法

みなさまこんにちは、新人Aです。 今日は、写真をIllustratorでモノクロにしてイラストっぽくベクター画像を仕上げたいと思います! 【1.Illustratorにベクター化したい画像を配置します …