morris js 사용하기
그래프 챠트 라이브러리 중 괜찮은 라이브러리 발견
한번 써보기로 했다.
1. 다운로드
1) morris js : http://morrisjs.github.io/morris.js/
2) raphael js : http://raphaeljs.com/
※ raphael js 는 다운 받으면 새 페이지로 소스가 쭈욱 나온다.
당황하지 말고 복사해서 파일을 하나 만들자.
2. CSS - 스크립트 추가
<!-- Morris CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/morris.js-0.5.1/morris.css'/>" />
<!-- Morris CSS -->
<!-- Morris Library -->
<script type="text/javascript" src="<c:url value='/resources/morris.js-0.5.1/raphael-min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/morris.js-0.5.1/morris.min.js'/>"></script>
<!-- Morris Library -->
3. 예제 function 및 html 추가
<!-- JavaScript -->
<script type="text/javascript">
function drawMorrisChart() {
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'morrisChart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
}
</script>
<!-- JavaScript -->
<!-- html -->
<button type="button" class="btn btn-primary" id="btnChartDraw" onclick="drawMorrisChart()">차트그리기</button>
<div id="morrisChart" style="height: 250px; width: 500px;"></div>
<!-- html -->
4. 확인
잘 된다.
999. 예제 만들던 중 이슈해결