설치

npm install amcharts3 --save

사용 샘플 소스

<template>
	<div id="chartdiv" style="width: 100%; height: 400px;" ref="chartdiv" />
</template>

<script>
import 'amcharts3'

import AmSerial from 'amcharts3/amcharts/serial'



export default {

	name: 'AmCharts',
	data: () => ({
		chartConfig: {
			type: 'serial',
			categoryField: 'type',

			chartCursor: {},

			graphs: [
			
	{
				
	type: 'column',
					title: 'Pizza types',

					valueField: 'sold',

					fillAlphas: 0.8

				}

			],

			dataProvider: [

				{ type: 'Margherita', sold: 120 },

				{ type: 'Funghi', sold: 120 },

				{ type: 'Capricciosa', sold: 120 },
				{ type: 'Quattro Stagioni', sold: 120 }
 
			]
		
}
	}),
	created() {
		AmCharts.makeChart(this.$refs.chartdiv, this.chartConfig)
	}
}
</script>

오류 수정

import AmCharts from 'amcharts3'

위 형태로 하면 AmCharts.makeChart() 함수를 찾을 수 없다는 오류가 나와서 수정

참조 URL

https://github.com/developerKumar/AmchartsUse


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret

history.back()
this.$router.go(-1)

UI 강제 업데이트
this.$forceUpdate()

// string replace all
let replaceAll = function (source, needle, target) {
    return source.split(needle).join(target)
}
// &lt; &gt;를 < > 변환
let decodeHTML = function (html) {
    let txt = document.createElement('textarea')
    txt.innerHTML = html
    return txt.value
}

 


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret

머신러닝 같은 강좌나 책을 읽다 보면 간혹 마주치는 단어가 시계열 혹은 시계열화 이란 것입니다. 말은 어려워 보이는데 영어로는 "time series" 라고 합니다. 한글은 어렵지만 영어는 어느 정도 뜻이 이해가 갑니다. 그냥 순차적으로 먼가 하는 거구나... 라는 센쑤~!

개발자들이 디비 등에서 추출한 정보는 보통 테이블 형식의 텍스트로 제공하는 경우가 많습니다. 이것을 보기 좋게 그래프 형태로 변형해서 보여주면, 직관적으로 이해하게 되고, 실시간 의사결정이 가능해 진다고 합니다. 예전부터 알고는 있었지만, 막상 그래프 표현은 좀 어렵기는 합니다.

vuejs에서는 되게 쉽습니다. 시계열의 대표적인 것이 Line Chart 일 것 같아서, 소스로 좀더 쉽게 만들어 보도록 하겠습니다. Line Charts 는 아래와 같은 형태 입니다.

설치

// 설치
npm i --save vue-chartjs chart.js

LineChart 템플릿 소스 샘플

// 공용 사용 가능성이 있어서 components/Charts 에 컴포넌트 형태로 저장하여 사용
// data = chartData 외부에서 가져옴
// chartData = {labels: ['전체 범주'], data: { label: '그래프 범주', data: []}
<script>
    import {Line} from 'vue-chartjs'

    export default {
        name: 'LineChart',
        extends: Line,
        props: ['chartData'],
        data: () => ({
                colorSets: [ // 여러 그래프 사용을 위해서 색상표 예약
                    {fore: '#EF9A9A', back: '#B71C1C'},
                    {fore: '#F48FB1', back: '#880E4F'},
                    {fore: '#CE93D8', back: '#4A148C'},
                    {fore: '#B39DDB', back: '#311B92'},
                    {fore: '#9FA8DA', back: '#1A237E'},
                    {fore: '#64B5F6', back: '#0D47A1'},
                    {fore: '#4FC3F7', back: '#01579B'},
                    {fore: '#0097A7', back: '#006064'},
                    {fore: '#00897B', back: '#004D40'},
                    {fore: '#81C784', back: '#1B5E20'},
                ],
                datacollection: { // 데이터 샘플
                    // 전체 범주
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    datasets: [
                        {
                        	// 그래프별 범주
                            label: 'Data One',
                            backgroundColor: '#f87979',
                            pointBackgroundColor: 'white',
                            borderWidth: 1,
                            pointBorderColor: '#249EBF',
                            // 실제 데이터. labels와 배열 순서가 맞아야 함. 빈곳은 0으로 보정이 필요
                            data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            },
                            gridLines: {
                                display: true
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                    legend: {
                        display: true
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }
            }
        ),
        mounted() {
            this.init()
        },
        methods: {
            init() {
                let data = this.chartData.chartData

                let datasets = []
                let pos = 0
                data.forEach((site) => {
                    let colors = this.colorSets[pos]

                    datasets.push({
                        label: site.label,
                        borderWidth: 2,
                        borderColor: colors.back,
                        backgroundColor: colors.back,
                        pointBorderColor: colors.fore,
                        pointBackgroundColor: colors.fore,
                        fill: false,
                        data: site.data
                    })

                    pos++
                })

                this.datacollection = {
                    labels: this.chartData.labels,
                    datasets: datasets
                }

                this.render()
            },
            render() {
                this.renderChart(this.datacollection, this.options)
            }

        }
    }
</script>

<style scoped>

</style>

vuejs 샘플 소스

<template>
    <v-container fluid>
        <v-row>
          <v-col>
            <div class="text-lg-center pa-5" style="width: 100%;" v-if="chartLoading">
              <v-progress-circular
                  width="7"
                  size="70"
                  indeterminate
                  color="red"
              ></v-progress-circular>
            </div>
            <line-chart :chartData="chartData" v-if="!chartLoading"/>
          </v-col>
        </v-row>
    </v-container>
</template>

<script>
    // '@/components/Charts/LineChart' 사용 가능하면 대체를 해도 된다.
    import LineChart from '../Charts/LineChart'

    export default {
        name: 'List',
        components: { LineChart },
        data: () => ({
            chartLoading: false, // 데이터를 불러오기 전까지는 progress circle을 사용
            chartData: []
        }),
        mounted() {
            this.init()
        },
        methods: {
            init() {
                let item = '{"labels":["01","02","03","04","05","06","07","08","09","10","11"],"chartData":[{"label":"다음","data":["65","13","22","125","41","142","156","121","24","29","151"]},{"label":"다우존스","data":["1","1","0","6","1","3","6","8","0","0","6"]},{"label":"네이버","data":["65","13","22","119","41","139","150","119","20","28","147"]},{"label":"뉴스원","data":["61","7","17","105","28","128","138","108","10","20","137"]},{"label":"다나와","data":["0","0","0","1","0","0","1","0","0","0","0"]}]}'
            	let data = JSON.parse(item)
                
                this.chartData = {
                    labels: data.labels,
                    chartData: data.chartData
                }

                // 차트 보이기
                this.chartLoading = false
            }
    }
</script>

<style scoped>
 
</style>

 

소스 샘플 결과


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret

 

// 설치
npm i --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

// package.json 확인
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^16.0.0",
        "@ckeditor/ckeditor5-vue": "^1.0.1"
    }

// template 파일 샘플
<template>
    <ckeditor :editor="editor"
              v-model="editorData"
              :config="editorConfig"
    />
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    import CKEditor from '@ckeditor/ckeditor5-vue'
    
    export default {
        name: 'CKEditor',
        components: {
            ckeditor: CKEditor.component
        },
        data: () => ({
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
                // The configuration of the editor.
                height: '500px',
                language: 'ko'
            }
        })
    }
</script>

참조 URL : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret

페이지 이동 전에 특정 이벤트를 처리하고 싶은 경우가 있는 경우 유용합니다.

// component LIFECYCLE
components: { ... },
mounted: { ... }
methods: { ... },
beforeRouteLeave (to, from, next) { ... } // 컴포넌트를 벗어나는 경우 처리할 이벤트

// 샘플
        beforeRouteLeave(to, from, next) {
            const answer = window.confirm('데이터 저장이 되지 않았습니다. 이 페이지를 나가시겠습니까?')
            if (answer) {
                next()
            } else {
                next(false) // false를 추가한 경우 페이지 이동을 하지 않음
            }
        }

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret