イントロダクション
前回「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"));
第１引数はグラフを挿入する要素の id です。
各自の環境に応じて、適切な id を設定してください。
（ここでは、<div id="graph-object"></div> 内に棒グラフが挿入されます。）
第３引数はグラフの各値のタイトルです。
任意の値を設定してください。
第４引数はグラフの書式設定です。
任意の値を設定してください。
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について