본문 바로가기
JSP

[ JSP ] Fusion Chart 한글 걱정 안해도 되는 차트

by 정윤재 2009. 4. 5.

jfreechart 보다 훨씬 가볍고 비쥬얼도 좋은 챠트에다가

한글도 무리 없이 돌아간다. 모든면에서  jfreechart 보다 앞서는것 같다.

역시...유료란...

유료라고 해서 겁먹을 필요는 없다. 기본적인 챠트들은 무료로 제공하는데

그정도만 해도 쓰는데 전혀 문제가 없을 정도이니까...

일단 사용법을 한번 보기로 하자

<SCRIPT LANGUAGE="Javascript" SRC="../../js/FusionCharts.js"></SCRIPT>
<!--   FusionCharts.js 를 불러와줘야 한다. (기본 설정입니다.)-->
<div id="chart2div"></div>
<!-- div 태그로 챠트가 들어갈 영역을 정한다. -->

<script type="text/javascript">
<!--
    var chart1 = new FusionCharts("Pie3D.swf", "식단", "500", "350", "0", "1");
    //해당 챠트에 맞는 플래쉬 파일들을 링크시켜준다. 그뒤는 옵션들 500,350 은 크기
    chart1.setDataXML("<%=chartXml%>");    
   //xml  형식의 데이터로 정보를 읽어오는데 한글 사용을 위해서는 xml 파일 보다는
   //String 형식으로 하는게 나을 것 같다. 
    chart1.render("chart2div");
    //chart를 미리 정해 놓은 div 영역에 그려준다.
-->
</script>

<!-- xml 데이터 형식 -->
<chart caption='제목'>
<set name='빵' value='100' />
 <set name='우유' value='200' />
</chart>
<!-- 아주 간단 하지 않은가? -->

js 파일 하나와 자기에게 필요한  플래쉬 파일 swf 확장자의 파일만 있으면 xml 데이터로

얼마든지 만들수 있는 것이다.



여기 까지만 하면 재미가 없지 않을까?

몇가지 팁이 있다. 여기까지 해서 구현했을때 한글 ... 절대 안된다.

물론 사이트를 방문하면 다 나와 있긴하다. (100% 영어라는 것은 감안하세요^^)

jsp 하는 분들은 다 아실거다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>


요렇게 페이지 인코딩을 utf-8로 설정 해주세요.

또 한가지...
html의 head 태그 안에

<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Insert title here</title>
<SCRIPT LANGUAGE="Javascript" SRC="../../js/FusionCharts.js"></SCRIPT>
</head>

요렇게 메타 태그를 넣어주세요.


실전코드

//chartTest.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%
StringBuffer sb   =   new StringBuffer();
sb.append("<chart caption='식단'>");
sb.append("<set name='빵' value='100'/>");
sb.append("<set name='우유' value='200'/>");
sb.append("</chart>");
String xmlData    =   sb.toString();
 
%>
<!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=UTF-8"/>
<title>Insert title here</title>
<SCRIPT LANGUAGE="Javascript" SRC="../js/FusionCharts.js"></SCRIPT>
</head>
<body>
<div id="chart2div"></div>
<script type="text/javascript">
<!--
    var chart1 = new FusionCharts("Pie3D.swf", "식단", "500", "350", "0", "1");
    chart1.setDataXML("<%=xmlData%>");   
    chart1.render("chart2div");
-->
</script>
</body>
</html>





정확한건
http://www.fusioncharts.com/  를 방문하면 더 자세히 나와 있지만...

제 소스를 기초로 만들면 간단히 만들수 있을 것이라고 생각합니다.

아... 한글 되는 것만으로 행복합니다. 거의 1주일을 챠트가지고 헤멨군요 ㅠ.ㅠ

기본적인 챠트를 첨부하려고 하는데 저작권 때문인 하여간 첨부가 안되네요...

원하시는 분은 댓글을 부탁드립니다. 아니면 위에 말씀 드린 싸이트에서

다운 받으실수 있으니까 크게 걱정 안하셔도 될 듯합니다.

댓글