20220124_Chart.vue

팡태(❁´◡`❁)·2022년 1월 26일
0

3rd_20220124

목록 보기
8/29
<template>
    <div>
        <h3>src/components/Chart.vue</h3>
        <div style="width: 300px; height: 400px;">
            <vue3-chart-js
                :id   = "state.id"
                ref   = "chartRef"
                :type = "state.type"
                :data = "state.data">            
            </vue3-chart-js>

            <button @click="updateChart">Update Chart</button>
            <button type="submit" @click="exportChart">Export Chart as PNG</button>            
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'

export default {
    components : { Vue3ChartJs },

    setup () {
        // const state = reactive({  }); - v-model 변화 감지. RW(Read Write. 읽기 쓰기) 가능
        const state = { //Read
            id   : 'doughnut',
            type : 'doughnut',
            data : {
                labels   : [ 'html', 'css', 'script', 'vue3' ],
                datasets : [
                    { 
                        backgroundColor: [ '#41B883','#E46651','#00D8FF','#DD1B16' ],
                        data: [ 40, 30, 80, 10 ]
                    },
                ]
            }
        }

        // 빈 것 만들기
        const chartRef = ref(null);

        //function updateChart() { } 
        const updateChart = () => {
            // 변경데이터 설정
            state.data.labels   = [ 'Cats', 'Dogs', 'Hamsters', 'Dragons' ]
            state.data.datasets = [
                {
                    backgroundColor: [ '#333333', '#E46651', '#00D8FF', '#DD1B16' ],
                    data: [ 100, 20, 800, 20 ]
                }
            ];

            // 컴포넌트에 변화되었음을 알려줌
            chartRef.value.update(250);
        }

        const exportChart = () => {
            let a = document.createElement('a')
            a.href = chartRef.value.chartJSState.chart.toBase64Image()
            a.download = 'image-export.png'
            a.click()
            a = null
        }

        return { state, updateChart, chartRef, exportChart }
    }
}
</script>

<style lang="scss" scoped>

</style>

0개의 댓글