javascript로 차트 만들기(jquery 프러그인 방식)

flash/flex를 대신하여, 간단히 만들어본 차트

사용하려고 만든건 아니지만, 확실히 flash/flex를 사용하는게...

장점이라면 flash를 지원하지 않는 아이폰에서도 표현이 된다.

 

IE에 경우 excanvas라이브러리를 사용하면 되지만 fillText는 사용할 수 없다.

IE9에선 html5를 지원한다.

 

jQuery.fn.extend({
	BarChart : function(data) {
		var datas = data.data;
		var column = data.column;
		var lineCount = Math.ceil((data.count) ? data.count : 10) * 2;
		var BarMaxValue = function() {
			var value = 0;
			for(var i = 0; i < datas.length; i++) {
				for(var k in datas[i]) {
					if(k != column) {
						if(value < datas[i][k]) {
							value = datas[i][k];
						}
					}
				}
			}
			return value;
		}
		var BarMaxCount = function() {
			var value = 0;
			for(var k in datas[0]) {
				if(k != column) {
					value++;
				}
			}
			return value;
		}
		var barColors = ["#dede12", "#afafaf", "#ceaf72", "#ea9863", "#3b9696", "#93b336", "#88b0cf", "#b65c60", "#9479b1", "#d3ac32"];
		var barLineColor = ["#ffff00", "#cccccc", "#ffcc66", "#f3ab7d", "#51abab", "#a9c751", "#bed8ec", "#cc8285", "#b7a6ca", "#edc95a"];
		
		var canvas = document.createElement("canvas");
		jQuery(canvas).attr({
			width : this.width(),
			height : this.height()
		});
		/**
		*	브라우저가 getContext를 지원하는지 확인
		*/
		if(canvas.getContext) {
			var maxWidth = this.width() - 55;
			var maxHeight = this.height() - 55;
			var columnWidth = maxWidth / datas.length;
			var lineHeight = maxHeight / lineCount;
			var maxValue = BarMaxValue();
			var barWidth = (columnWidth - 16) / BarMaxCount();
			
			var context = canvas.getContext("2d");
			
			context.beginPath();
			context.lineWidth = 10;
			context.strokeStyle = "#bbccdd";
			context.moveTo(40, 10);
			context.lineTo(40, this.height() - 35);
			context.stroke();
			context.closePath();
			
			context.fillStyle = "#0b333c";
			context.font = "11px Dotum, Gulim, Arial, Verdana, sans-serif";

			var valueCount = maxValue / lineCount;
			for(var i = 0; i <= lineCount; i++) {
					var lineY = Math.ceil(lineHeight * i);
					if(i != lineCount) {
						context.beginPath();
						context.lineWidth = 2;
						context.strokeStyle = "#ffffff";
						context.moveTo(35, 15 + lineY);
						context.lineTo(45, 15 + lineY);
						context.stroke();
						context.closePath();
					}
					if(i%2 == 0) {
						if(i != lineCount) {
							context.beginPath();
							context.lineWidth = 2;
							context.strokeStyle = "#eeeeee";
							context.moveTo(45, 15 + lineY);
							context.lineTo(this.width() - 10, 15 + lineY);
							context.stroke();
							context.closePath();
						}
						context.textAlign = "right";
						context.fillText(Math.ceil(maxValue - (valueCount * i)), 30, 19 + lineY);
					}
			}

			context.beginPath();
			for(var i = 0; i < datas.length; i++) {
				context.lineWidth = 10;
				context.strokeStyle = "#bbccdd";
				if(i == 0) {
					context.moveTo(45 + (columnWidth * i), this.height() - 30);
				} else {
					context.moveTo(45 + (columnWidth * i) + 1, this.height() - 30);
				}
				if((i+1) == datas.length) {
					context.lineTo(45 + (columnWidth * (i+1)), this.height() - 30);
				} else {
					context.lineTo(45 + (columnWidth * (i+1)) - 1, this.height() - 30);
				}
				context.textAlign = "center";
				context.fillText(datas[i][column], (45 + (columnWidth * i)) + (columnWidth / 2), this.height() - 10, columnWidth-4);
			}
			context.stroke();
			context.closePath();
			
			for(var i = 0; i < datas.length; i++) {
				var n = 0;
				for(var k in datas[i]) {
					if(k != column) {
						if(datas[i][k]) {
							var percent = datas[i][k] / maxValue;
							var barHeight = maxHeight * percent;
							var barY = 15 + (maxHeight - barHeight);
							var barYY = (this.height() - 50) - (maxHeight - barHeight);
							
							context.shadowOffsetX = 0;
							context.shadowOffsetY = 0;
							context.shadowColor = "#7a7a7a";
							context.shadowBlur = 5;
							context.lineWidth = 2;
							context.fillStyle = barColors[n];
							context.fillRect(((47 + (columnWidth * i)) + 7) + (n * barWidth), barY, barWidth - 2, barYY);
							context.strokeStyle = barLineColor[n];
							context.strokeRect(((49 + (columnWidth * i)) + 7) + (n * barWidth), barY + 1, barWidth - 4, barYY - 2);
						}
						n++;
					}
				}
			}
			this.html(canvas);
		} else {
			// swf 등으로 대처
			this.html("IE9이상 또는 IE 외 브라우저를 이용하세요.");
		}
	}
});

jQuery(window).ready(function() {
	var chartData = [{"country":"가가가","a-1":501,"a-2":467},
					{"country":"나나나","b-1":512,"b-2":477},
					{"country":"다다다","c-1":0,"c-2":488},
					{"country":"라라라","d-1":10,"d-2":299},
					{"country":"마마마","e-1":1,"e-2":400},
					{"country":"바바바","f-1":712,"f-2":411}];
									
	var chartData1 = [{"country":"가가가","a-1":501},
					{"country":"나나나","b-1":512},
					{"country":"다다다","c-1":0},
					{"country":"라라라","d-1":10},
					{"country":"마마마","e-1":1},
					{"country":"바바바","f-1":712}];
									
	var chartData2 = [{"country":"가가가","a-1":501,"a-2":467,"a-3":123,"a-4":800},
					{"country":"나나나","b-1":512,"b-2":477,"b-3":321,"b-4":700},
					{"country":"다다다","c-1":0,"c-2":488,"c-3":234,"c-4":600},
					{"country":"라라라","d-1":10,"d-2":299,"d-3":432,"d-4":500}];
									
	var chartData3 = [{"country":"","a-1":501,"a-2":467,"a-3":123,"a-4":800,"a-5":501,"a-6":467,"a-7":123,"a-8":800,"a-9":555,"a-10":111}];
									
	jQuery("#chart1").BarChart({
		data : chartData2,
		column : "country",
		count : 10
	});
	
	jQuery("#chart2").BarChart({
		data : chartData,
		column : "country",
		count : 10
	});
	
	jQuery("#chart3").BarChart({
		data : chartData1,
		column : "country",
		count : 5
	});
	
	jQuery("#chart4").BarChart({
		data : chartData3,
		column : "country",
		count : 5
	});
});
/*
*	<span id="chart4" style="width:250px;height:200px;"></span>
*	<span id="chart3" style="width:300px;height:200px;"></span>
*	<div id="chart2" style="width:400px;height:300px;"></div>
*	<div id="chart1" style="width:500px;height:400px;"></div>
*/

 

 

안드로이드 게임들(Android games)