본문 바로가기

Javascript

그래프API - taucharts

자바스크립트로 쉽게 그래프를 그려보자.

튜토리얼에서 프로토콜이 빠져있어서 삽질한 것말고는 삽질할게 없을 정도로 간단하다.

코드를 보면

<script src="http://cdn.jsdelivr.net/d3js/latest/d3.min.js" charset="utf-8"></script>

<script src="http://cdn.jsdelivr.net/underscorejs/latest/underscore-min.js" type="text/javascript"></script>

<script src="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">


해더에 걸어주자. 그리고 바디에 다음 코드를 넣자.

<div id="line"></div>

<script type="text/javascript">

var datasource = [{

  type:'us', count:20, date:'12-2013'

},{

  type:'us', count:10, date:'01-2014'

},{

  type:'bug', count:15, date:'02-2014'

},{

  type:'bug', count:23, date:'05-2014'

}];


var chart = new tauCharts.Chart({

    data: datasource,

    type: 'line',

    x: 'date',

    y: 'count',

    color: 'type' // there will be two lines with different colors on the chart

});


window.onload = function(){

chart.renderTo('#line');

}

</script>


출처: http://www.taucharts.com/


'Javascript' 카테고리의 다른 글

한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
구글 단축URL을 만들자  (0) 2014.02.28
객체 안의 프로퍼티 접근  (0) 2014.01.20
javascript Boolean 값  (0) 2014.01.20