HTML5で円グラフを表示する（Canvas）

この記事は1年以上前の記事のため、内容が古い可能性があります。

※追記：グラフ出力について考慮されていなかったので、引数にoutput_idを付け足しました。(2010.07.21)

HTML5のCanvasを利用すると、円グラフを表示することができます。（Javascriptが必要ですが）

上記のサイトから「graph_circle_1_0_2.zip」をダウンロードして解凍すると、フォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。円グラフが表示されるかと思います。

ただこのサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。

var items = [
    ["sample01", 150],
["sample02", 100],
    ["sample03", 80],
    ["sample04", 60],
    ["sample05", 30],
    ["sample06", 20],
    ["sample07", 10],
    ["sample08", 10],
    ["sample09", 10],
    ["sample10", 10],
    ["sample11", 10],
    ["sample12", 10]
];

これはちょっと面倒。

てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。

とはいえ、jsファイルを直接変更する必要はありません。

あくまでhtmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_circle_1.html」を改良して使用しました。（まずはサンプルを見たい方はこちら）

手順

１．bodyタグ内に、パラメータが入ったテーブルを記述してください。

※tableタグにid="graph"を忘れずに記述してください。

※tbodyタグを忘れないよう注意してください。（thead内のデータはグラフに影響を与えません。）

<table id="graph">
    <caption>アンケート結果</caption>
    <thead>
        <tr>
            <th>項目名</th>
            <th>概要</th>
            <th>値</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>sample01</th>
            <td>description</td>
            <td>150</td>
        </tr>
        <tr>
            <th>sample02</th>
            <td>description</td>
            <td>100</td>
        </tr>
        <tr>
            <th>sample03</th>
            <td>description</td>
            <td>80</td>
        </tr>
        <tr>
            <th>sample04</th>
            <td>description</td>
            <td>60</td>
        </tr>
        <tr>
            <th>sample05</th>
            <td>description</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

※「sample_graph_circle_1.html」は「sample12」までありますが、今回は「sample05」までにしました。

２．headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のcircle_graphという関数を追記してください。

※sample_graph_circle_1.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。

<script type="text/javascript">
function circle_graph(table_id, output_id, title_num, value_num){
    //初期化
    var get_tr_array = new Array();
    var get_table_innerTag = new Array();
    var items = 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("*");

        get_title = get_table_innerTag[title_num].innerHTML;
        get_value = parseInt(get_table_innerTag[value_num].innerHTML);

        items[i] = [get_title, get_value];
    }

    //グラフ出力
    var cg = new html5jp.graph.circle(output_id);
    if(!cg) { return; }

    cg.draw(items);
}
</script>

３．bodyタグは以下のように「onload="circle_graph('graph', 'sample', 0, 2)"」を実行するように記述してください。

<body onload="circle_graph('graph', 'sample', 0, 2)">

※circle_graph関数の引数について
circle_graph(table_id, output_id, title_num, value_num);

table_id：パラメータが入っているtableタグのID（今回の例では「graph」）
output_id：グラフ出力先のcanvasタグのID（今回の例では「sample」）
title_num：「項目名」が入っている、テーブルの列番号（今回の例では１列目）
value_num：「値（数値）」が入っている、テーブルの列番号（今回の例では３列目）

列番号について：javascriptでは一番始めが0になるので、１列目は「0」、３列目は「2」になります。

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

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

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

タグ：: Canvas; HTML5

トラックバック

トラックバックURL

コメントする

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

名前 *
メール*
URL

ダリの雑記：WEBプログラム版