외부 라이브러리 모듈화 (chart.js)

외부 라이브러리 모듈화

vue.js 관려 라이브러리가 없을때 일반 라이브러리를 결합할 수 있어야한다.

차트/ 데이트 피커 /테이블라이브러리 / 스피너 등등

chart.js

설치

https://www.chartjs.org/docs/latest/

npm install chart.js@2.7.0

 

import 로 App.vue에서 로딩

https://www.chartjs.org/docs/latest/getting-started/usage.html

여기에 있는 거 추가

App.vue

mount() 라이프 사이클 훅에서 차트를 그려야한다.

<template>
  <div>
    <h1>Chart.js</h1>
    <canvas id ="myChart" width="400" height= "400"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  //컴포넌트 속성 , 인스턴스 옵션 

  mounted(){
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    console.log(myChart);
  }
}
</script>

<style>

</style>

 

차트를 컴포넌트화

BarChart.vue 생성 해서 chart 로직 갖다 넣고

App.vue 에 컴포넌트 등록해주기

<template>
  <div>
    <h1>Chart.js</h1>
    <bar-chart></bar-chart>
  </div>
</template>

<script>
import BarChart from './components/BarChart.vue'

export default {
  components: { BarChart },
  //컴포넌트 속성 , 인스턴스 옵션 
 component :{
   BarChart,
 },
}
</script>

<style>

</style>

 

!tip 다른 컴포넌트에서 같은 id 값을(getElementById) 쓰면 마지막에 렌더링 된 애를 바라보게 된다.

vue 레퍼런스 속성

<div id ="app">hello</div>
//..
document.getElementById('app');
document.querySelector('app');
$('#app');

를 대신해서 vue에서는 어떻게 쓰냐 ?

<div ref ="app" id ="app">hello</div>
//..
this.$refs.app; 

레퍼런스로 사용 > 컴포넌트에서만 접근 가능하기 떄문에 같은 ref 값을 사용해도 상관 없다.

 

차트 플러그인

https://vuejs.org/v2/guide/plugins.html#ad

에 플러그인 관련된 내용 있음

plugins/ChartPlugin.js 생성

인스턴스가 생성되었을때 모든 컴포넌트에서 사용하고 싶은 기능을 정의하는 것

export default {
    install(Vue){j
        console.log('chart plugin loaded');

    }
}

main.js 에서 등록

import Vue from 'vue'
import App from './App.vue'
import ChartPlugin from './plugins/ChartPlugin.js'  //!
Vue.config.productionTip = false

Vue.use(ChartPlugin); //!
//ChartPlugin.js 의 install 이 실행된다. 

new Vue({
  render: h => h(App),
}).$mount('#app')

ChartPlugin.js

import Chart from 'chart.js' 
export default {
    install(Vue){
        console.log('chart plugin loaded');
        Vue.prototype.$_Chart = Chart;
        //차트를 플러그인에서 로딩해서 다른곳에서 쓸수 있게 함 


    }
}

this.$_Chart 다른 곳에서 이렇게 불러와서 쓸 수 있다.

$_ vue.js에서 권고하는 플러그인 prefix

BarChart.vue

import 제거 , new Chart 를 this.$_Chart 로 수정

<template>
    <canvas ref ="barChart" id ="barChart" width="400" height= "400"></canvas>
</template>
<script>

export default {     
  mounted(){
    var ctx = this.$refs.barChart;
    var myChart = new this.$_Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    console.log(myChart);
  }
}
</script>
<style>

</style>