mirror of
				https://github.com/KevinMidboe/vue-chartjs.git
				synced 2025-10-29 18:00:20 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			52 lines
		
	
	
		
			919 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			52 lines
		
	
	
		
			919 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
import Vue from 'vue'
 | 
						|
import Chart from 'chart.js'
 | 
						|
import { mergeOptions } from '../helpers/options'
 | 
						|
 | 
						|
export default Vue.extend({
 | 
						|
  template: `
 | 
						|
    <div>
 | 
						|
      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
 | 
						|
    </div>
 | 
						|
  `,
 | 
						|
 | 
						|
  props: {
 | 
						|
    chartId: {
 | 
						|
      default: 'radar-chart',
 | 
						|
      type: String
 | 
						|
    },
 | 
						|
    width: {
 | 
						|
      default: 400,
 | 
						|
      type: Number
 | 
						|
    },
 | 
						|
    height: {
 | 
						|
      default: 400,
 | 
						|
      type: Number
 | 
						|
    }
 | 
						|
  },
 | 
						|
 | 
						|
  data () {
 | 
						|
    return {
 | 
						|
      defaultOptions: {
 | 
						|
      }
 | 
						|
    }
 | 
						|
  },
 | 
						|
 | 
						|
  methods: {
 | 
						|
    renderChart (data, options) {
 | 
						|
      let chartOptions = mergeOptions(this.defaultOptions, options)
 | 
						|
 | 
						|
      this._chart = new Chart(
 | 
						|
        this.$refs.canvas.getContext('2d'), {
 | 
						|
          type: 'radar',
 | 
						|
          data: data,
 | 
						|
          options: chartOptions
 | 
						|
        }
 | 
						|
      )
 | 
						|
      this._chart.generateLegend()
 | 
						|
    }
 | 
						|
  },
 | 
						|
  beforeDestroy () {
 | 
						|
    this._chart.destroy()
 | 
						|
  }
 | 
						|
})
 |