日々のコンピュータ情報の集積と整理

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

2014年5月27日火曜日

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

イントロダクション

前回「HTMLと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_height, graph_border_style, graph_border_width, graph_border_color, graph_background_color, graph_width) {
        this.max_height = max_height;                           // 棒グラフの棒の最大の長さ (ピクセル)
        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_width = graph_width;                         // 棒グラフの幅
    }

    // グラフの作成
    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>";


        var value_html = "";            // 値の行の html
        var name_html = "";             // 名前の行の html

        value_html += "<td style=\"text-align:right;\">" + valuesName.value + "</td>";
        name_html += "<td style=\"text-align:right;\">" + valuesName.name + "</td>";


        // 最大のカウントを取得する
        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 height = graphGenParam.max_height * 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 +
                    ";height:" + height +
                    "px;width:" + graphGenParam.graph_width +
                    ";margin:0px auto;\"></div>";
            }


            value_html += "<td style=\"vertical-align:bottom;text-align:center;\">" + graphValues[i].value + graph_div + "</td>";
            name_html += "<td style=\"text-align:center;\">" + graphValues[i].name + "</td>";
        }

        graph_html += "<tr>" + value_html + "</tr><tr>" + name_html + "</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"));


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

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

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

結果

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







関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...