Vue.js 호출

Question

VueChart를 가져다 쓰려고 하는데요 App.vue, LineExample.js. BaseChart.js가 있으면LineExample.js에서 BaseChart.js의 renderChart 메소드를mounted 에서는 this.renderChart(opt1, opt2); 이런식으로 바로 호출할수 있는데methods 에서는 BaseChart.js의 renderChart메소드가 호출이 안되는데 어떻게 호출할수 있는지요? 감사합니다 LineExample.jsimport { Line } from './BaseCharts'export default { extends: Line, mounted () { /* let opt1 = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July','August'], datasets: [ { label: ['Data One'], //backgroundColor: '#f87979', borderColor : ['blue'], borderWidth: 1, fill:false, data: [20,30,50,30,80,20,70,50] }, { label: ['Data Two'], //backgroundColor: '#f87979', borderColor : ['red'], borderWidth: 1, fill:false, data: [50,80,60,20,40,90,30,70] } ] } let opt2 = {responsive: true, maintainAspectRatio: false} this.renderChart(opt1, opt2); /* this.renderChart({ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July','August'], datasets: [ { label: ['Data One'], //backgroundColor: '#f87979', borderColor : ['blue'], borderWidth: 1, fill:false, data: [20,30,50,30,80,20,70,50] }, { label: ['Data Two'], //backgroundColor: '#f87979', borderColor : ['red'], borderWidth: 1, fill:false, data: [50,80,60,20,40,90,30,70] } ] }, {responsive: true, maintainAspectRatio: false}) */ }, methods: { fillData: function(){ let opt1 = { labels: ['aaaa', 'February', 'March', 'April', 'May', 'June', 'July','August'], datasets: [ { label: ['Data One'], //backgroundColor: '#f87979', borderColor : ['blue'], borderWidth: 1, fill:false, data: [20,30,50,30,80,20,70,50] }, { label: ['Data Two'], //backgroundColor: '#f87979', borderColor : ['red'], borderWidth: 1, fill:false, data: [50,80,60,20,40,90,30,70] } ] } let opt2 = {responsive: true, maintainAspectRatio: false} // //Line.generateChart.methods.renderChart(opt1, opt2); //Line.generateChart.renderChart(opt1, opt2); Line.methods.renderChart(opt1, opt2); } //Line.function.generateChart.methods.renderChart(opt1, opt2); } }} BaseChart.jsimport Chart from 'chart.js' export function generateChart (chartId, chartType) { return { render: function (createElement) { return createElement( 'div', { style: this.styles, class: this.cssClasses }, [ createElement( 'canvas', { attrs: { id: this.chartId, width: this.width, height: this.height }, ref: 'canvas' } ) ] ) }, props: { chartId: { default: chartId, type: String }, width: { default: 400, type: Number }, height: { default: 400, type: Number }, cssClasses: { type: String, default: '' }, styles: { type: Object }, plugins: { type: Array, default () { return [] } } }, data () { return { _chart: null, _plugins: this.plugins } }, methods: { addPlugin (plugin) { this.$data._plugins.push(plugin) }, generateLegend () { if (this.$data._chart) { return this.$data._chart.generateLegend() } }, renderChart (data, options) { if (this.$data._chart) this.$data._chart.destroy() if (!this.$refs.canvas) throw new Error('Please remove the tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components') this.$data._chart = new Chart( this.$refs.canvas.getContext('2d'), { type: chartType, data: data, options: options, plugins: this.$data._plugins } ) } }, beforeDestroy () { if (this.$data._chart) { this.$data._chart.destroy() } } }} export const Bar = generateChart('bar-chart', 'bar')export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')export const Doughnut = generateChart('doughnut-chart', 'doughnut')export const Line = generateChart('line-chart', 'line')export const Pie = generateChart('pie-chart', 'pie')export const PolarArea = generateChart('polar-chart', 'polarArea')export const Radar = generateChart('radar-chart', 'radar')export const Bubble = generateChart('bubble-chart', 'bubble')export const Scatter = generateChart('scatter-chart', 'scatter') export default { Bar, HorizontalBar, Doughnut, Line, Pie, PolarArea, Radar, Bubble, Scatter}

Vue.js 호출

0개의 답변

Q&A 목록