[HTML5] [스크랩]HTML5 Canvas를 이용한 Chart Library

원본 : http://messier219.tistory.com/31

HTML5의 Canvas기능을 활용한 Chart Library를 소개합니다.

RGraph 라는 오픈소스 라이브러리입니다.

 

http://www.rgraph.net/

아래와 같은 차트를 플래시나 실버라이트와 같은 RIA 플랫폼 없이

HTML5 기능만으로 구현이 가능합니다.

 

 

 

소스

<script>
window.onload = function ()
{
var data = [10,4,17,50,25,19,20,25,30,29,30,29];

var line = new RGraph.Line("myLine", data);
line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
line.Set('chart.colors', ['rgba(255,0,0,1)']);
line.Set('chart.linewidth', 2);
line.Set('chart.filled', true);
line.Set('chart.hmargin', 5);
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
line.Set('chart.gutter', 40);
line.Draw();
}
< /script>

이 밖에 바, 도넛 차트 등 다양한 종류의 차트도 사용할 수 있습니다.


HTML5 Canvas기능을 활용한 다른 차트 라이브러리.
http://www.zingchart.com/
http://cyberpython.github.com/AwesomeChartJS/