인터넷을 다니다가 jquery 를 이용해서 차트를 만드는 것을 발견했다.
약간 시간이 지나고 나니까 사이트는 잊어버렸다.
일단 예제 소스와 파일들을 첨부한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jgcharts.js" type="text/javascript"></script>
<script>
function sub(){
var api= new jGCharts.Api();
jQuery('<img>')
.attr('src',api.make({
data : [[13320],
[11200],
[22345]
],
//1번째 y축 데이터 3개 (ting,ju,family)=> 1월 =>[110,2200,600]
//2번째 y축 데이터 3개 (ting,ju,family)=> 2월 =>[120,2300,700]
//3번째 y축 데이터 3개 (ting,ju,family)=> 3월 =>[400,300,100]
type : 'lc',
size : '1000x250',
legend : [encodeURIComponent('친구찾기'),encodeURIComponent('팅안심'),encodeURIComponent('팅주니어안심')],
title :'LBS',
axis_labels : ['11-1','11-2','11-3']
})).appendTo("#line1");
//line1 에다 붙이기(당연히 여러개도 가능)
//lc,lxy
}
</script>
</head>
<body onload="sub()">
<div id="line1">
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jgcharts.js" type="text/javascript"></script>
<script>
function sub(){
var api= new jGCharts.Api();
jQuery('<img>')
.attr('src',api.make({
data : [[13320],
[11200],
[22345]
],
//1번째 y축 데이터 3개 (ting,ju,family)=> 1월 =>[110,2200,600]
//2번째 y축 데이터 3개 (ting,ju,family)=> 2월 =>[120,2300,700]
//3번째 y축 데이터 3개 (ting,ju,family)=> 3월 =>[400,300,100]
type : 'lc',
size : '1000x250',
legend : [encodeURIComponent('친구찾기'),encodeURIComponent('팅안심'),encodeURIComponent('팅주니어안심')],
title :'LBS',
axis_labels : ['11-1','11-2','11-3']
})).appendTo("#line1");
//line1 에다 붙이기(당연히 여러개도 가능)
//lc,lxy
}
</script>
</head>
<body onload="sub()">
<div id="line1">
</div>
</body>
</html>
jgcharts-0.97[1].zipjquery 는 jquery 사이트에 가서 다운 받으세요^^
구글 차트 하고도 무슨 관련이 있는 것 같긴한데... 어쨌든 구글 차트는 외부로 인터넷이 연결된
곳에서만 가능하지만 이건 인트라넷에서도 그냥 쓸 수 있어서 좋은것 같습니다.
압축 파일 안에 예제도 있고 설명서도 다 있습니다.
'JAVASCRIPT > 자바스크립트 한글 되는 차트' 카테고리의 다른 글
| JS차트 (구글 차트) 한글 사용법 [자바스크립트 차트] (2) | 2010.12.05 |
|---|
댓글