[ Chartjs ] vue.js에서 차트 라이브러리 vue-chartjs 사용하기

💬 개요

차트는 프로젝트를 진행하면서 필수로 자주 사용하였다.

echarts , chartjs를 사용해 보았는데, 그중 chartjs 사용법을 정리해보고자 한다.

 

📌 정의

vue-chartjs 라이브러리는 chart.js를 vue에서 사용할 수 있도록 한 라이브러리이다.

chart.js를 사용하기 위해서는 chart.js, vue-chartjs 라이브러리가 기본적으로 필요하며,

기타 차트 관련 플러그인 라이브러리를 추가 설치할 수 있다.

 

📌 vue-chartjs 설치

npm install vue-chartjs chart.js

 

📌 chartjs 플러그인 라이브러리 설치 (필수X)

⏩ chartjs-plugin-datalabels 설치

: 차트 내에 데이터의 값을 표시하기 위한 플러그인 라이브러리

npm install chartjs-plugin-datalabels --save

⏩ chartjs-plugin-datalabels 설치

: 차트 내에 기준 선이나 기준 영역을 표시하기 위한 플러그인 라이브러리

npm install chartjs-plugin-annotation

⏩ chartjs-plugin-zoom설치

: 차트 내에서 확대, 축소 기능을 사용하기 위한 플러그인 라이브러리

 npm install chartjs-plugin-zoom

 

📌 차트 컴포넌트( .js ) 생성

: 다른 차트를 사용하고 싶을 때는 Line -> Pie / Bar 등으로 변경하면 된다.

// views/Component/LineChart

import { Line, mixins } from 'vue-chartjs';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import zoomPlugin from 'chartjs-plugin-zoom';
import chartjsPluginAnnotation  from 'chartjs-plugin-annotation';

const { reactiveProp } = mixins;

export default {
	extends: Line,
	mixins: [reactiveProp],
	props: ['options'],
	mounted() {
		this.addPlugin(ChartDataLabels,chartjsPluginAnnotation,zoomPlugin); // 플러그인 추가
		this.renderChart(this.chartData, this.options);  // 차트 refresh 기능 추가
	},
	watch: {
		options () {
		   this.renderChart(this.chartData, this.options);
		}
	}
};

 

📌 차트 사용하기

차트 컴포넌트를 import해온 후 사용한다.

 

<template>
    <line-chart
        class="graph-containter" 
        :options="options"
        :chartData="chartDataArray">
    </line-chart>
</template>

<script>
import LineChart from '@/views/Component/LineChart';

export default {
	components: {
		LineChart
	},
	computed: {
		...rootComputed,
		...serviceComputed,
        	options() { 
			let unit = 'mA';
            		return  {
				responsive: true,
				maintainAspectRatio: false, // chart 높이 지정을 위해 필요
				plugins: {
					datalabels: {
                        display: true,
						anchor: 'start',
						align : 'end',
					},
                    zoom: {
                        pan: {
                            enabled: true,
                            mode: 'y',
                        },
                        zoom: {
                            enabled: true,
                            mode: 'y',
                        },
                    }
				},
				legend: {
					display: false,
				},
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return `${tooltipItem.yLabel} ${unit}` ;
                        },
                    }
                },
				scales: {
					yAxes: [
						{
							ticks: {
								beginAtZero: false,
                                crossAlign : 'center',
								minGridDistance: 8,
								maxTicksLimit: 10,
                                max: this.trendData.current !== undefined ? Math.max(...this.trendData.current)+1 : 300,
                                min: this.trendData.current !== undefined ? Math.min(...this.trendData.current)-1 : 0,
								callback: function(val, index){
									return `${val.toFixed(1)} ${unit}`
								}
							},
                            scaleLabel: {
                                display: true,
                                labelString: `${this.getMessage_('EWMS000035')}(mA)` //전류
                            },
						}
					],
					xAxes: [ {
                        ticks:{
                            display:true,
                            fontSize:12,
                            fontcolor:'#A5A5A5',
                            padding:1,
                            callback: function(val, index) {
                                return val.slice(-8).substr(0,5)
                            },
                        },
                        gridLines:{
                            display:true,
                            fontcolor:'#A5A5A5',
                        },
                        scaleLabel: {
                            display: true,
                            labelString: this.getMessage_('EWMS000091') // 시간
                        }
                    }],
				}
			}
        },

        chartDataArray() {
            let dataList = {
                labels: this.trendData.labels,
                datasets: [{
                    data: this.trendData[this.selectedButton],
                    borderColor: 'rgba(186, 5, 0, 0.34)',
                    pointerColor:'rgba(199, 0, 25, 1)',
                    backgroundColor: '#00ff0000'
                }]
            }
            return dataList
        }
	}
}
</script>