Search

  毎日にもっと楽~を! BLOG Tokyo

2008年4月28日

ホームページ上にグラフを載せる簡単な方法

ホームページにグラフを掲載するには、prototypeを使うと簡単だ。

使用方法

1.plotrをダウンロードする
2.htmlの<head>内にprototype.js、excanvas.js、plotr.jsのパスを書く
3.グラフを表示したいところに下記を書く(この場合、bars1がグラフの名前)
<div><canvas id="bars1" height="200" width="300"></canvas></div>
あとは、html本文のどこかに下記を書く。基本的にはデータの部分を書きかけるだけでうまく行く。

<script type="text/javascript">
// データをここで設定する、項目(英語とか国語とか)も設定できる
var dataset = {
'英語': [[0, 4], [1, 4.5], [2, 3], [3, 3], [4, 2]],
'数学': [[0, 4.5], [1, 4], [2, 4], [3, 4], [4, 1]],
'国語': [[0, 5], [1, 5], [2, 4.5], [3, 5], [4, 4]]
};

var options = {
// グラフの色基調を決める。redとかblueとか
colorScheme: 'red',
// 縦ならvertical, 横ならhorizontalになる
barOrientation: 'vertical',
// Define a padding for the canvas node
padding: {
left: 30,
right: 0,
top: 5,
bottom: 15
},
background: {
color: '#f2f2f2'
},
axis: {
// フォントの色を設定
labelColor: '#000000',
// 軸のラベルを設定
x: {
ticks: [
{v:0, label:'鈴木'},
{v:1, label:'松井'},
{v:2, label:'福留'},
{v:3, label:'黒田'},
{v:4, label:'井川'}
]
}
},
// 項目の場所を設定
legend: {
position:{
left: '255px'
}
}
};

// グラフを作成する、この場合bars1がグラフの名前
var vertical = new Plotr.BarChart('bars1',options);
// データを挿入する
vertical.addDataset(dataset);
// グラフに適用
vertical.render();

</script>

使いたいなと思われる方は、
具体的なページでソースをチェックしてみてください。



Bookmark and Share


編集長のおすすめの一冊!2010

comments

comment form

(BLOG Tokyo にはじめてコメントされる場合、不適切なコメントを防止するため、掲載前に管理者が内容を確認しています。適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。)

comment form