More Games - PAINONE
Android games
sites.google.com
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)
탱그램 XOR - Google Play 앱 탱그램 XOR은 XOR 로직을 기반으로하는 퍼즐 게임입니다. 각 스테이지마다 정해진 문제와 동일한 퍼즐을 완성해야합니다. play.google.com 벽돌깨기 - Google Play 앱 벽돌깨기 게임..
painone7.tistory.com
'Language > html5' 카테고리의 다른 글
| Server-Sent Events (0) | 2010.08.04 |
|---|---|
| Web Workers (0) | 2010.07.24 |
| Web SQL Databas (0) | 2010.07.24 |
| Web Storage (세션 스토리지) (0) | 2010.07.16 |
| Web Storage (로컬 스토리지) (0) | 2010.07.16 |
More Games - PAINONE
Android games
sites.google.com
