그누보드로 쇼핑몰을 만들던중..
그래프가 필요하게 되었다.
구글 검색어는 jquery chart로 검색 시작.
다양한 종류의 차트가 나온다.
우선적으로 고려해야 할 사항을 생각해보자
첫째로 어디에 사용할것인가?
- 그누보드 관리자에서 쓸것이다.
두번째로 어느 브라우져에서 쓸것인가?
- 아마도 관리자급 이상일텐데 익스플로어겠다.
세번째는 회사에서 쓸것이기 때문에 라이센스 문제이다.
그리고 가장 중요한것은 쓰기 쉬워야 한다.
그럼 쓸만한게 머있냐고?
이쁜건 없다.
기본적으로 보여줄 수 있는것만 찾는것이다.
url : https://developers.google.com/chart/interactive/docs/gallery
그래서 내가 선택한것은 구글 차트이다.
가장 기본적인 선형 차트를 예제로 보자
<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'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
구글 스크립트를 선언해주고
차트를 선언한다음
데이터를 넣고 어느 차트를 쓸지 선택후 그려준다.
이정도면 엄청 사용하기 쉽다.
우선 또 적용을 시켜봐야겠다.
'개발관련 > 웹 프로그램' 카테고리의 다른 글
| 프레스타샵(prestashop) 관리자 한글 설치 (2) | 2013.09.04 |
|---|---|
| 프레스타샵 설치 (0) | 2013.09.02 |
| 당신이 웹 개발시 쓰는 브라우저는? (0) | 2013.08.22 |
| 그누보드 쇼핑몰 만들기 #1 (0) | 2013.08.22 |
| jquery plugin dynatree (0) | 2013.08.16 |
