HTMLとJavaScriptで単純な横向き棒グラフを作成する

イントロダクション

Webページ上に棒グラフを動的に表示したいというケースがあると思います。

私も Web サービス「文長さ計測」を作成するうえで、結果を棒グラフで表示するために JavaScript のコードを作成しました。

そこで、今回はその時に作成したコードを紹介したいと思います。

コード

以下のコードをグラフを表示させたい<body>内の任意の位置に貼り付けてください。
（なお、<script type="text/javascript"></script>の部分は<head>内に設置することもできます。）

<div id="graph-object"></div>

<script type="text/javascript">
<!--
    // 系列名と値
    function CGraphValue(name, value) {
        this.name = name;                       // 系列名
        this.value = value;                     // 値
    }

    // グラフのデータ
    var graphValues = [];
    graphValues.push(new CGraphValue("系列1", 10));
    graphValues.push(new CGraphValue("系列2", 20));
    graphValues.push(new CGraphValue("系列3", 25));


    // グラフの生成パラメータ
    function CGraphGenerateParam(max_width, graph_border_style, graph_border_width, graph_border_color, graph_background_color, graph_height) {
        this.max_width = max_width;                             // 棒グラフの棒の最大の長さ (ピクセル)
        this.graph_border_style = graph_border_style;           // 棒グラフの棒のボーダーのスタイル
        this.graph_border_width = graph_border_width;           // 棒グラフの棒のボーダーの幅
        this.graph_border_color = graph_border_color;           // 棒グラフの棒のボーダーの色
        this.graph_background_color = graph_background_color;   // 棒グラフの棒の背景色
        this.graph_height = graph_height;                       // 棒グラフの高さ
    }

    // グラフの作成
    createGraph("graph-object", graphValues, new CGraphValue("系列名", "値"), new CGraphGenerateParam(300, "solid", "1px", "#999999", "#cccccc", "14px"));

    /*
    グラフを作成する

    id_graph : グラフを設定する要素の id
    graphValues : グラフの系列データの配列 (CGraphValueのArray）
    valuesName : データの名前 (CGraphValue）
    graphGenParam : グラフの生成パラメータ　(CGraphGenerateParam)
    */
    function createGraph(id_graph, graphValues, valuesName, graphGenParam) {

        // グラフ 出力
        var obj_graph = document.getElementById(id_graph);
        var graph_html = "<table>";
        graph_html += "<tr><td>" + valuesName.name + "</td><td>" + valuesName.value + "</td></tr>";

        // 最大のカウントを取得する
        var max_value = 0;
        for (var i = 0; i < graphValues.length; i++) {
            if (graphValues[i].value > max_value) {
                max_value = graphValues[i].value;
            }
        }

        for (var i = 0; i < graphValues.length; i++) {

            var width = graphGenParam.max_width * graphValues[i].value / max_value;

            var graph_div = "";
            if (graphValues[i].value > 0) {
                graph_div = "<div style=\"border-style:" + graphGenParam.graph_border_style +
                    ";border-width:" + graphGenParam.graph_border_width +
                    ";border-color:" + graphGenParam.graph_border_color +
                    ";background-color:" + graphGenParam.graph_background_color +
                    ";width:" + width +
                    "px;height:" + graphGenParam.graph_height + ";\"></div>";
            }

            graph_html += "<tr><td>" + graphValues[i].name + "</td><td><table><tr><td>" + graph_div + "</td><td>" + graphValues[i].value + "</td></tr></table></td></tr>";
        }

        graph_html += "</table>";
        obj_graph.innerHTML = graph_html;
    }

//-->
</script>

以下の部分が棒グラフのデータです。

// グラフのデータ
var graphValues = [];
graphValues.push(new CGraphValue("系列1", 10));
graphValues.push(new CGraphValue("系列2", 20));
graphValues.push(new CGraphValue("系列3", 25));

任意の値を設定してください。

以下の部分で、グラフの生成処理を呼び出しています。

// グラフの作成
createGraph("graph-object", graphValues, new CGraphValue("系列名", "値"), new CGraphGenerateParam(300, "solid", "1px", "#999999", "#cccccc", "14px"));

第１引数はグラフを挿入する要素の id です。
各自の環境に応じて、適切な id を設定してください。
（ここでは、<div id="graph-object"></div> 内に棒グラフが挿入されます。）

第３引数はグラフの各値のタイトルです。
任意の値を設定してください。

第４引数はグラフの書式設定です。
任意の値を設定してください。

結果

以下のように、横向きの棒グラフが作成できます。

Dr.ウーパのコンピュータ備忘録

2014年5月27日火曜日

HTMLとJavaScriptで単純な横向き棒グラフを作成する

イントロダクション

コード

結果

コメントを投稿

おすすめの投稿