イントロダクション
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> 内に棒グラフが挿入されます。）
第３引数はグラフの各値のタイトルです。
任意の値を設定してください。
第４引数はグラフの書式設定です。
任意の値を設定してください。
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について