HTML5で円グラフを表示する（Canvas） | ブログトップ | HTML関連 | JavaScript関連 | HTML5のvideoの現状
HTML5で棒グラフを表示する（Canvas）
この記事は1年以上前の記事のため、内容が古い可能性があります。
HTML5のCanvasを利用すると、棒グラフを表示することができます。（Javascriptが必要ですが）
やり方はこちら JavaScript ライブラリー – HTML5.JP
上記のサイトから「graph_vbar_1_0_4.zip」をダウンロードして解凍すると、そのフォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。棒グラフが表示されるかと思います。
ただこのサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。
var items = [
["商品A", 20, 58, 40, 14, 38, 20, 40],
["商品B", 10, 14, 58, 80, 70, 90, 20],
["商品C", 10, 14, 58, 80, 70, 90, 20],
["商品D", 10, 14, 58, 80, 70, 90, 20],
["商品E", 10, 14, 58, 80, 70, 90, 20]
];
てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。
とはいえ、jsファイルを直接変更する必要はありません。
あくまでhtmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_vbar_4.html」を改良して使用しました。（まずはサンプルを見たい方はこちら）
手順
１．bodyタグ内に、パラメータが入ったテーブルを記述してください。
※tableタグにid="graph"を忘れずに記述してください。
※theadタグとtbodyタグを忘れないよう注意してください。（theadタグはグラフのx軸の項目に使用します）
<table id="graph">
<thead>
<tr>
<th>商品名</th>
<th>商品概要</th>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody>
<tr>
<th>商品Ａ</th>
<td>商品概要</td>
<td>20</td>
<td>58</td>
<td>40</td>
<td>14</td>
<td>38</td>
<td>20</td>
<td>40</td>
</tr>
<tr>
<th>商品Ｂ</th>
<td>商品概要</td>
<td>10</td>
<td>14</td>
<td>58</td>
<td>80</td>
<td>70</td>
<td>90</td>
<td>20</td>
</tr>
<tr>
<th>商品Ｃ</th>
<td>商品概要</td>
<td>10</td>
<td>14</td>
<td>58</td>
<td>80</td>
<td>70</td>
<td>90</td>
<td>20</td>
</tr>
<tr>
<th>商品Ｄ</th>
<td>商品概要</td>
<td>10</td>
<td>14</td>
<td>58</td>
<td>80</td>
<td>70</td>
<td>90</td>
<td>20</td>
</tr>
<tr>
<th>商品Ｅ</th>
<td>商品概要</td>
<td>10</td>
<td>14</td>
<td>58</td>
<td>80</td>
<td>70</td>
<td>90</td>
<td>20</td>
</tr>
</tbody>
</table>
２．headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のvbar_graphという関数を追記してください。
※sample_graph_vbar_4.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。
<script type="text/javascript">
function vbar_graph(table_id, output_id, title_num, value_start_num, value_end_num, x_title, y_title){
/*初期化*/
var get_tr_array = new Array();
var get_table_innerTag = new Array();
var items = new Array();
var x_title_array = new Array();
var y_title_array = new Array();
/*表のパラメータを取得*/
graph_table = document.getElementById(table_id);
get_tr_array = graph_table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for(i=0; i<get_tr_array.length; i++){
get_table_innerTag = get_tr_array[i].getElementsByTagName("*");
items[i] = new Array();
items[i][0] = get_table_innerTag[title_num].innerHTML;
num = 1;
for(j=value_start_num; j<=value_end_num; j++){
items[i][num] = parseInt(get_table_innerTag[j].innerHTML);
num++;
}
}
/*表のX軸・Y軸項目を取得*/
//配列をリセットする
delete get_tr_array;
delete get_table_innerTag;
//X軸
x_title_array[0] = x_title;
get_tr_array = graph_table.getElementsByTagName("thead")[0].getElementsByTagName("tr");
get_table_innerTag = get_tr_array[0].getElementsByTagName("*");
num = 1;
for(j=value_start_num; j<=value_end_num; j++){
x_title_array[num] = get_table_innerTag[j].innerHTML;
num++;
}
//Y軸
y_title_array[0] = y_title;
/*グラフ出力*/
var g = new html5jp.graph.vbar(output_id);
if( ! g ) { return; }
var params = {
x: x_title_array,
y: y_title_array,
barShape: "line"
};
g.draw(items, params);
};
</script>
３．bodyタグは以下のように「onload="vbar_graph('graph', 'sample',0, 2, 8, '曜日', '注文数（個）')"」を実行するように記述してください。
<body onload="vbar_graph('graph', 'sample', 0, 2, 8, '曜日', '注文数（個）')">
※vbar_graph関数の引数について
function vbar_graph(table_id, output_id, title_num, value_start_num, value_end_num, x_title, y_title)
- table_id：パラメータが入っているtableタグのID（今回の例では「graph」）
- output_id：グラフ出力先のcanvasタグのID（今回の例では「sample」）
- title_num：「項目名」が入っている、テーブルの列番号（今回の例では１列目）
- value_start_num：「値（数値）」が入っている、テーブルの開始列番号（今回の例では３列目）
- value_end_num：「値（数値）」が入っている、テーブルの終了列番号（今回の例では９列目）
- x_title：グラフX軸の項目名（今回は「曜日」）
- y_title：グラフY軸の項目名（今回は「注文数（個）」）
列番号について：javascriptでは一番始めが0になるので、１列目は「0」、３列目は「2」、９列目は「8」になります。
以上でサンプルの様に表示されます。（サンプルではテーブルがしょぼかったので少しスタイルを追加しています）
ざっくりと改造なので粗があるかもしれませんが、ご了承ください。
トラックバック
トラックバックURL
コメントする
※メールアドレスが公開されることはありません。