2년전 정도에 챠트를 사용하려다 좌절한적이 있다.
그래서 fusion chart 라는 플래쉬 차트를 사용한 적이 있는데...
유료라서 trail 버전이라고 라벨이 나오는 것이다.
상용 사이트에 써야 하는데 참 난감 했다
여러가지 차트를 사용해보려고 했지만...
전부 한글 문제에서 걸려 넘어졌다.
근데 시간이 지나니... 역시 구글이 해결해 주었다.
예전에는 구글 차트가 한글이 되지 않았었는데...
요새는 되는 것 같다.
구글 차트의 사용법은 아래 URL 을 참고 하시고...
http://code.google.com/intl/ko/apis/chart/
한글이 되는 코드를 예시해 보겠다.
<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>
function sub(){
//var obj1 = document.getElementById('div1');
//obj1.style.display = 'block';
$("#div1").attr({style:['display','block']});
$("#chart1").attr({src:"http://chart.apis.google.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=1"+encodeURIComponent("월")+"|"+"2"+encodeURIComponent("월")});
}
</script>
</head>
<body>
<div id="div1" style="display:none;">
<img id="chart1" />
</div>
<input type="button" value="그래프" onclick="sub()"/>
</body>
</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>
function sub(){
//var obj1 = document.getElementById('div1');
//obj1.style.display = 'block';
$("#div1").attr({style:['display','block']});
$("#chart1").attr({src:"http://chart.apis.google.com/chart?cht=p3&chs=250x100&chd=t:60,40&chl=1"+encodeURIComponent("월")+"|"+"2"+encodeURIComponent("월")});
}
</script>
</head>
<body>
<div id="div1" style="display:none;">
<img id="chart1" />
</div>
<input type="button" value="그래프" onclick="sub()"/>
</body>
</html>
img 태그에 url 을 써주면 구글에서 이미지를 내려주는 형식이다.
나는 img 태그를 안보이게 했다가 그래프 버튼을 클릭시 URL 을 삽입해주고
img 태그를 보이게 해주었다.
그런데 중요한점은 encodeURIComponent("월")
요런 형식으로 데이터가 들어가는 것이다.
한마디로 URL encoding 해서 넘겨주면 그대로 찍혀서 나온다는 거다.
그동안은 URL로 넘겨줄때 한글이 깨진 데이터로 전송되어서 어떻게 해결 방법이
없었던것 같다.
하여간 이렇게 해서 아래와 같은 그림이 나왔다.
이제 브라우저 호환 걱정 없이, 한글 걱정 없이 웹에서 깔끔한 차트를 이용할 수 있게 되었다.
'JAVASCRIPT > 자바스크립트 한글 되는 차트' 카테고리의 다른 글
| 자바스크립트 차트 [jquery 이용] (0) | 2010.12.15 |
|---|
댓글