c3로 그래프 그리기_02

2017-07-30

html

C3로 그래프를 그려보자.

1_ 저번 포스팅에는 준비를 했으니 이제 그래프를 그려봅니다.
다짜고짜 코드를 가져옵니다. 본문에는 차트가 들어갈 div를 마련.

1	<div id="chart"></div>

스크립트 넣는 부분에 적당한 예시의 코드를 가져온다.

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', 30, 50, 100, 230, 300, 310],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 300, 200, 300, 250, 450]
        ]
    }
});

전에도 말했지만 c3와 d3는 서버에 올리지 않으면 잘 보이니 않는다. 그래서 바로 에디터에서 서버를 구동해서 볼 수 있는 live server preview 플러그인을 사용했다. (VS code기준)

그러면 이런 모습이 보여지게 된다.

아름답다. 반응형에 데이터 위에 마우스가 오버되었을 때 말풍선도 나온다~ㅇㅁㅇ!

2_ 데이터를 적용해보자
데이터를 넣는 방법은 아주 쉽다.

data: {
    x: 'x',
    url: 'data_01.csv'
}

데이터를 columns에서 url로 바꾸어주고 저장되어 있는 위치를 써준다. 하지만 이렇게 해서는 아직 그래프가 보여지지 않는다.

3_x축 정의
데이터에 X축이 같이 있기 떄문에 x축을 정의해준다. type에는 여러가지가 있는걸까. 암튼 data 레벨에 x축 범위에 대한 axis속성을 추가한다.

axis: {
    x: {
        type: 'category',
     },

그러면 이제 이런 모습을 볼 수 있게된다.
c3로 그래프 만들기

4_스타일 바꾸기
데이터가 입혀진 그래프를 그렸으니 이제 디자인 파일과 비교하면서 스타일을 다듬으면 된다.
일단 데이터 마다 점이 찍혀 있으니 그것을 빼보자.

1
2
3

point: {
    show: false
}

그리고 x,y축의 선이 너무 진한 것 같으니 css에서 선의 색을 조절해보자.

.c3 .c3-axis-x path,
.c3 .c3-axis-x line {
    stroke: #ddd;
}
        
.c3 .c3-axis-y path,
.c3 .c3-axis-y lines {
    stroke: #ddd;
}
        
.c3-ygrid-line.gridGray line {
    stroke: #ddd;
}

데이터 컬러의 색도 바꿀 수 있다. 특정 데이터의 색을 바꿀 수 있지만 간단하게 패턴으로 바꿔본다.

1
2
3

color: {
    pattern: ['#ff5f00', '#ffe082', '#80deeb', '#c4e0a6', '#bdaba3']
}

여기까지 하면 이런 데이터를 볼 수 있다.
스타일 바꾸기

5_ 마무리, 포멧 정리
이제 거의 다 한 것 같다. 마지막으로 x축과 y축 범위? 단위를 정리해주자.
y축의 단위가 %이기때문에 %를 추가해보자.axis아래에 x다음에 추가해주면 된다.

 y: {
    tick: {
        format: function(d) {
            return d + "%";
         }
    },
}

그리고 x축의 날짜도 다 보여 줄 필요가 없으니 줄일 수 있다. axis의 x에 추가하면 된다.

1
2
3

tick: {
    count: 7
}

마지막으로 y축의 그리드를 추가해줘야 하는데 그리드는 이렇게 추가할 수 있다.

grid: {
    y: {
        show: true
    }
}

이건뭐지
그리드가 점선인데다가 여러개가 있어서 상당히 지저분해 보인다.
결국 특정 y값을 정해서 그 값의 그리드만 표현하기로.

grid: {
    y: {
        lines: [{
            value: 0,
            class: 'gridGray'
        }, {
            value: 1,
            class: 'gridGray'
        }, {
            value: 2,
            class: 'gridGray'
        }]
    }
}

이렇게 되면 그리고자 했던 그래프를 만날 수 있다.

최종 코드는

<!DOCTYPE html>
<html lang="ko">
<head>
    <style>
         .c3 .c3-axis-x path,
        .c3 .c3-axis-x line {
            stroke: #ddd;
        }
        
        .c3 .c3-axis-y path,
        .c3 .c3-axis-y lines {
            stroke: #ddd;
        }
        
        .c3-ygrid-line.gridGray line {
            stroke: #ddd;
        } 
    </style>
</head>
<body>
    <div id="chart"></div>
    <script>
        var chart = c3.generate({
            data: {
                x: 'x',
                url: 'data_01.csv'
            },
            axis: {
                x: {
                    type: 'category',
                    tick: {
                        count: 7
                    }
                },
                y: {
                    tick: {
                        format: function(d) {
                            return d + "%";
                        }
                    },
                }
            },
            point: {
                show: false
            },
            color: {
                pattern: ['#ff5f00', '#ffe082', '#80deeb', '#c4e0a6', '#bdaba3']
            },
            grid: {
                y: {
                    lines: [{
                        value: 0,
                        class: 'gridGray'
                    }, {
                        value: 1,
                        class: 'gridGray'
                    }, {
                        value: 2,
                        class: 'gridGray'
                    }]
                }
            }
        });
    </script>
</body>
</html>