반응형
제목 그대로다.
아마 보통은 JsChart 많이 쓰겠지?
조금 검색해 보니 주로 쓰이는 JavaScript Chart 라이브러리를 비교해 준 사이트가 있었다. 게다가 2013년판! 최신임.
영어를 몰라도 될 정도로 잘 정리가 되어 있지만, 굳이 설명을 하자면, 주로 봐야 할 항목은 Image, Like, OpenSource, Trial and Prices , Chart Type, Platforms 정도다 . ( 다 봐야 된단 이야기네 )
그래프가 어케 표현되는지는 Image 항목의 그림파일 보면 되고, 돈은 Trial and Price 의 Free 항목 보면 된다.
자신이 원하는 그래프 형태( 파이형, 선형 , 막대형 등등 ) 는 Chart Type 에서 고르고, 브라우저 지원 사항은 Features 로 결정하면 됨.
근데...음... 개인적으로는 그것보다 그냥 Google Chart 써라. ( https://developers.google.com/chart/?hl=ko )
이걸 추천하는 까닭은 다음과 같다.
1. 라이센스 걱정 없고,
2. 크로스 브라우징 걱정도 없고
3. 예제 설명이 직관적이라, 바로 보고 값만 고치면 쓸 수 있다.
4. 기타등등( 서버 안정성 )
그냥 쓰기 딱 좋다. 테스트도 필요없을 정도.
예를 들면, 꺾은선 그래프 + 면적 표시는 이렇게 표시된다.
[ https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart ]
근데, Example 파일에 이미 값 설정이 다 있음.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
그냥, 값만 바꿔서 쓰면 됨. 짱 편함.
덧: 만약 Chart 값에 Unicode( 예:한글 ) 을 썼는데 깨진다면, UTF-8 설정을 안한 거임. 괜히 encodeURIComponent() 쓰지 마시고,
1. html(혹은 JS) 파일을 UTF-8 타입으로 저장했는지 확인.
2. 문서의 head 에 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 를 선언했는지 확인.
하면 된다.
이거 한글 되는거 확인한거임.
반응형
'프로그램' 카테고리의 다른 글
| ubuntu 설치 후, root 권한 획득. (0) | 2013.08.03 |
|---|---|
| php + mysql 에서는 transaction 을 중첩할 수 없나보다. (0) | 2013.06.22 |
| php 에서, 세션이 안 지워질 때. (0) | 2013.02.01 |
| 사용자 첨부파일 (0) | 2012.11.09 |
| FACEBOOK API 작성기 (7) | 2012.10.22 |