Sample is best!
Sample is best!
開発環境 メモ帳
実行環境 Internet Explorer 11


svgGraph2.html 
<!doctype html>
<head>
<title>svgGraph2</title>
<script>
 
var header = 1;	// ヘッダ行 0=なし 1=あり
 
function draw(col)
{
	// SVG要素の取得と初期化
	var svg = document.getElementById("svg");
	while (svg.firstChild) {
		svg.removeChild(svg.firstChild);
	}
 
	// データの取得と配列化
	var data_s = document.getElementById("data").value;
	data_s = data_s.replace(/\n$/, "");
	data_s = data_s.replace(/\t/g, ",");
	var data_a = data_s.split(/\n/);
 
	// テーブルの作成
	var table = [];
	var year_min = 9999;
	var year_max = 0;
	var value_max = 0;
	for (var i = 0; i < data_a.length; i++) {
		table[i] = data_a[i].split(/,/);
		if (i < header) continue;
 
		var year = parseInt(table[i][0]);
		if (year < year_min) year_min = year;
		if (year_max < year) year_max = year;
 
		var value = parseInt(table[i][col]);
		if (value_max < value) value_max = value;
	}
	var year_delta = year_max - year_min;
 
	var graph_max;
	for (graph_max = 50; graph_max < value_max; ) {
		graph_max *= (graph_max.toString().substr(0, 1) == "2") ? 2.5 : 2;
	}
 
	// 月
	for (var i = 1; i <= 12; i++) {
		var t = append(svg, "text", {"x":i * 50, "y":420});
		t.textContent = i + "月";
	}
 
	// 補助線
	for (var i = 0; i <= 5; i++) {
		var y = Math.floor(400 * (5 - i) / 5);
		append(svg, "line", {"x1":50, "y1":y, "x2":650, "y2":y, "stroke":"gray"});
		var t = append(svg, "text", {"x":0, "y":y + 5});
		t.textContent = (graph_max * i / 5).toString();
	}
	{
		var t = append(svg, "text", {"x":0, "y":420});
		t.textContent = table[0][col];
	}
 
	// 凡例
	for (var i = 0; i <= year_delta; i++) {
		var y = i * 30;
 
		var a = {"x":670, "y":y, "width":15, "height":15, "stroke":"black"};
		a["fill"] = "rgb(255," + Math.floor(255 * i / year_delta) + ",0)";
		append(svg, "rect", a);
 
		var t = append(svg, "text", {"x":700, "y":y + 13});
		t.textContent = (year_min + i) + "年";
	}
 
	// 棒グラフ
	for (var i = header; i < table.length; i++) {
		var year = parseInt(table[i][0]) - year_min;
		var month = parseInt(table[i][1]);
		var value = parseInt(table[i][col]);
		var height = Math.floor(400 * value / graph_max);
 
		var a = {};
		a["x"] = month * 50 + year * 10;
		a["y"] = 400 - height;
		a["width"] = 15;
		a["height"] = height;
		a["stroke"] = "black";
		a["fill"] = "rgb(255," + Math.floor(255 * year / year_delta) + ",0)";
		append(svg, "rect", a);
	}
}
 
function append(svg, type, attr)
{
	var e = document.createElementNS("http://www.w3.org/2000/svg", type);
	for (var n in attr) {
		e.setAttribute(n, attr[n]);
	}
	svg.appendChild(e);
	return e;
}
 
</script>
</head>
 
<body>
<svg id="svg" width=800 height=480></svg>
<br>
<button onclick="draw(2)">使用量</button>
<button onclick="draw(3)">料金</button>
<br><br>
<textarea id="data" cols=80 rows=20>
Year	Month	m^3	Yen
2012	1	14	2893
2012	2	15	3051
2012	3	14	2882
2012	4	8	1953
2012	5	9	2102
2012	6	8	1959
2012	7	6	1659
2012	8	7	1826
2012	9	5	1511
2012	10	7	1829
2012	11	11	2463
2012	12	11	2457
2013	1	16	3201
2013	2	11	2401
2013	3	14	2858
2013	4	12	2591
2013	5	10	2323
2013	6	5	1541
2013	7	6	1720
2013	8	4	1393
2013	9	3	1229
2013	10	6	1736
2013	11	13	2896
2013	12	14	2992
2014	1	19	3723
2014	2	15	3096
2014	3	14	2919
2014	4	11	2478
2014	5	8	2062
2014	6	4	1380
2014	7	6	1722
2014	8	4	1374
2014	9	4	1371
2014	10	6	1704
2014	11	5	1532
2014	12	11	2537
2015	1	21	4226
</textarea>
</body>
 
「svgGraph2」をウィキ内検索
最終更新：2015年02月03日 16:39