| ブログトップ | HTML関連 | JavaScript関連 |

HTML5で棒グラフを表示する(Canvas)

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」を改良して使用しました。(まずはサンプルを見たい方はこちら

 

手順

1.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>商品A</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>商品B</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>商品C</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>商品D</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>商品E</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>

 

2.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>

 

3.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:「項目名」が入っている、テーブルの列番号(今回の例では1列目)
  • value_start_num:「値(数値)」が入っている、テーブルの開始列番号(今回の例では3列目)
  • value_end_num:「値(数値)」が入っている、テーブルの終了列番号(今回の例では9列目)
  • x_title:グラフX軸の項目名(今回は「曜日」)
  • y_title:グラフY軸の項目名(今回は「注文数(個)」)

列番号について:javascriptでは一番始めが0になるので、1列目は「0」、3列目は「2」、9列目は「8」になります。

以上でサンプルの様に表示されます。(サンプルではテーブルがしょぼかったので少しスタイルを追加しています)

サンプル [新しいウィンドウで開く]

ざっくりと改造なので粗があるかもしれませんが、ご了承ください。

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

トラックバック

トラックバックURL

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記