이 예제에서는 Chartkick 라이브러리를 사용하여 멀티 라인 그래프를 생성하는 방법을 배워보겠습니다.
Chartkick이란?
Chartkick은 JavaScript 차트 라이브러리의 하나로, 간단한 구문을 사용하여 다양한 종류의 그래프를 생성할 수 있습니다. Chartkick은 Google Charts와 Chart.js와 같은 다양한 차트 엔진을 지원합니다.
필요한 패키지 설치
먼저, Chartkick과 함께 사용할 차트 엔진을 설치해야 합니다. 이 예제에서는 Google Charts를 사용하겠습니다. chartkick 및 google-charts 패키지를 설치합니다.
npm install chartkick google-charts
멀티 라인 그래프 생성하기
다음은 Chartkick을 사용하여 멀티 라인 그래프를 생성하는 간단한 예제입니다.
import Chartkick from 'chartkick';
import Vue from 'vue';
import VueChartkick from 'vue-chartkick';
import 'chart.js';
Vue.use(VueChartkick, { Chartkick });
new Vue({
data() {
return {
chartData: {
"2021-01-01": { "Series 1": 5, "Series 2": 10, "Series 3": 15 },
"2021-01-02": { "Series 1": 2, "Series 2": 4, "Series 3": 6 },
"2021-01-03": { "Series 1": 8, "Series 2": 16, "Series 3": 24 }
}
};
},
mounted() {
this.renderChart();
},
methods: {
renderChart() {
new Vue({
el: '#chart',
data: {
chartData: this.chartData
},
template: '<line-chart :data="chartData" :library="{backgroundColor: \'#fafafa\'}"></line-chart>'
});
}
}
}).$mount('#app');
위 예제에서는 Vue와 Chartkick을 사용하여 멀티 라인 그래프를 생성합니다. 데이터는 객체 형식으로 제공되며, 각 날짜별로 시리즈와 해당 시리즈의 값이 포함되어 있습니다. 이 예제에서는 3개의 시리즈인 “Series 1”, “Series 2”, “Series 3”을 사용합니다.
라인 차트의 스타일을 변경하고 싶다면 template 속성에서 :library 옵션을 사용하여 원하는 스타일을 설정할 수 있습니다. 이 예제에서는 배경색을 설정하는 예시 코드가 포함되어 있습니다.
마지막으로, line-chart 컴포넌트를 Vue 인스턴스의 el 속성과 함께 렌더링합니다.
위 예제 실행 시 멀티 라인 그래프가 생성되고, 각 날짜별로 시리즈의 값을 확인할 수 있습니다.
이제 Chartkick을 사용하여 멀티 라인 그래프를 생성하는 방법을 알게 되었습니다. Chartkick에는 다양한 그래프 옵션과 스타일링 옵션이 있으므로, 필요에 따라 문서를 참조하여 멋진 그래프를 만들어 보세요.