マーカーネット株式会社

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デザイナーが仕事を依頼されたとき、まず最初に聞いておくべき7つの事。

こんばんわ。WEBデザイナーのKです。 本日は、WEBデザイナーがWEBディレクターから案件を依頼された時に、 必ず聞いておくべきことをまとめてみました。 ざっくりなので、細かく分けるとまだまだ沢山あ …

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

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

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

要素がガクガクブルブル震える変わった動き!

要素がガクガクブルブル震える変わった動き! http://www.markernet.co.jp/blog/2015/09/04/post-6077/ Facebook

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング PYPL PopularitY of Programming Language index 10月のプログラミング言語人気ランキングの発表によりますと …

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材

こんにちは新人デザイナーTです。 今回は無料で公開されているphotoshop用の打ち上げ花火の演出が簡単に出来るブラシ素材をいくつかご紹介させていただきます。 収録されているファイルの中には様々な打 …