73. chart.js 라이브러리 사용

1. 차트 라이브러 NPM으로 설치

2. 설치된 라이브러리를 import로 App.vue에서 로딩

3. mounted() 라이프 사이클 훅에서 차트를 그림

4. 차트를 컴포넌트화

5. 컴포넌트의 플러그인화

6. 컴포넌트 통신을 이용한 차트 컴포넌트 기능 결합

---

<App.vue>

<template>
  <div>
    <h1>chart.js</h1>
    <bar-chart></bar-chart>
    <doughnut-charts></doughnut-charts>
    <line-chart></line-chart>  
    <polar-area></polar-area>  
  </div>
</template>

<script>
import BarChart from './components/BarChart.vue'
import DoughnutCharts from './components/DoughnutCharts.vue'
import LineChart from './components/LineChart.vue'
import PolarArea from './components/PolarArea.vue'

export default {
  // 컴포넌트 속성 && 인스턴스 옵션
 components:{
    BarChart,
    DoughnutCharts,
    LineChart,
    PolarArea
 }
};
</script>

<style lang="scss" scoped>

</style>

---

<BarChart.vue>

<template>
    <div>
        <canvas id="BarChart" width="400" height="400"></canvas>
    </div>
</template>

<script>
import Chart from 'chart.js'

export default {    
    mounted() {
        const ctx = document.getElementById('BarChart');
        const BarChart = 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
                    }
                }
            }
        });
    },
};
</script>

<style lang="scss" scoped>

</style>

---

<DoughnutCharts.vue>

<template>
    <div>
        <canvas id="DoughnutCharts" width="400" height="400"></canvas>
    </div>
</template>

<script>
import Chart from 'chart.js'

export default {
 mounted() {
       const data = {
                labels: [
                    'Red',
                    'Blue',
                    'Yellow'
                ],
                datasets: [{
                    label: 'My First Dataset',
                    data: [300, 50, 100],
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)'
                    ],
                    hoverOffset: 4
                }]
            };
        const config = {
            type: 'doughnut',
            data: data,
        };  
        const getElementById = new Chart(
            document.getElementById('DoughnutCharts'),
            config
        );
 },
 
};
</script>

<style lang="scss" scoped>

</style>

---

<LineChart.vue>

<template>
    <div>
        <canvas id="LineChart" width="400" height="400"></canvas>
    </div>
</template>

<script>
import Chart from 'chart.js'


export default {
    mounted() {       
        const labels = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
        ];
        const data = {
            labels: labels,
            datasets: [{
                label: 'My First Dataset',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        };
        const config = {
            type: 'line',
            data: data,
        };
        const LineChart = new Chart(
            document.getElementById('LineChart'),
            config
        );
    },
   
};
</script>

<style lang="scss" scoped>

</style>

---

<PolarArea.vue>