막대 그래프 bar chart c3js 알아보기

bar 차트 중에 제일 좋아 보인다. 마이너스 숫자도 잘 처리되어 있다.

http://c3js.org/samples/chart_bar.html

여기서 끝난게 아니다. 막대 그래프를 가져다 대면, 표 형식으로 보여주는게 매력이네요.

코드도 구현하기 쉽다.

이미 구현한 chart 객체를 호출하기 위해 간단하게 chart.load() 함수를 통해 그려지며,

뭔가를 돋보이도록 1초 후에 그려지도록 하는 시뮬레이션을 하기 위해, 아래처럼 load() 함수 내부에 기술하고 setTimeout 을 구현한다.

columns: [

            ['data3', 130, -150, 200, 300, -200, 100]

        ]

전체 코드를 보자.~

var chart = c3.generate({

    data: {

        columns: [

            ['data1', 30, 200, 100, 400, 150, 250],

            ['data2', 130, 100, 140, 200, 150, 50]

        ],

        type: 'bar'

    },

    bar: {

        width: {

            ratio: 0.5 // this makes bar width 50% of length between ticks

        }

        // or

        //width: 100 // this makes bar width 100px

    }

});

setTimeout(function () {

    chart.load({

        columns: [

            ['data3', 130, -150, 200, 300, -200, 100]

        ]

    });

}, 1000);

단지 bar 차트만 있는게 아니다. 정말 많이 있어서 좋다.

모든 샘플 자료는 아래에 있다. 그리고 라이선스는 MIT 이다.

http://c3js.org/examples.html

소스 다운로드는 github에서 다운로드 받을 수 있다. 링크는 아래와 같다.

https://github.com/masayuki0812/c3