morris 차트 웹페이지에 사용하기

Morris.Bar({
	element: 'graphx1',
    data: [
    	{year: '2008', value: 20},
        {year: '2009', value: 10},
        {year: '2010', value: 5},
        {year: '2011', value: 13},
        {year: '2012', value: 18}
	],
    xkey: 'year',
    ykeys: ['value'],
    barColors: ['#26B99A'],
    labels: ['수치'],
    barRatio: 0.4,
    xLabelAngle: 25,
    gridTextSize: 10,
    resize: true
})

만약 data를 동적 리스트로 받는다면 {xkey: 데이터 x축 값, ykey: 데이터 y축 값} 형태로 리스트에 저장 후

data: 리스트 명,

xkey: 'xkey이름',

ykeys: ['ykey이름'],

이런 식으로 변형해주면 됩니다.

xLabelAngle 옵션은 x라벨길이가 너무 길어 막대 당 라벨이 잘려서 보일 때 회전시켜주는 기능입니다.

resize 옵션은 true를 주면 자동으로 리사이징하는 기능입니다.

Morris 차트의 좋은 점이 바로 resize를 위해 별도의 함수를 만들지 않아도 되는 것이라고 생각해요. (기본 옵션으로 기능이 내장되어 있어서)

 

https://morrisjs.github.io/morris.js/bars.html

morris.js

기타 기능은 위 링크보시면 됩니다.