SHARE
TWEET

Untitled

a guest Apr 23rd, 2019 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2. import { Line, mixins } from 'vue-chartjs'
  3. const { reactiveProp } = mixins
  4.  
  5. export default {
  6.   mixins: [reactiveProp],
  7.   extends: Line,
  8.   props: {  //待會會從父組件傳入圖表資料
  9.     chartData: {
  10.       type: Object,
  11.       default: () => {}
  12.     }
  13.   },
  14.   data: () => ({
  15.     options: { // option 類似圖表的 config 檔,可以在此客製圖表樣式及其他細節
  16.       responsive: true,
  17.       maintainAspectRatio: false,
  18.       scales: {
  19.         yAxes: [
  20.           {
  21.             ticks: {
  22.               stepSize: 1 // 設定 y 軸的數字級距
  23.             }
  24.           }
  25.         ]
  26.       }
  27.     }
  28.   }),
  29.   watch: { // 只要 chartData 改變,就要重新渲染圖表
  30.     chartData() {
  31.       this.$data._chart.destroy()  // 官方文件 api 提供的 destroy() 方法
  32.       this.renderLineChart() // 客製重新渲染圖表的 function
  33.     },
  34.     deep: true
  35.   },
  36.   mounted() {
  37.     this.renderLineChart() // 首次渲染圖表的 function 寫在 mounted,此處把 renderChart 拉成獨立的 function 因為會重複使用
  38.   },
  39.   methods: {
  40.     renderLineChart() {
  41.       this.renderChart(this.chartData, this.options) // 官方文件 api 提供的 renderChart() 方法,一定需要這兩個參數
  42.     }
  43.   }
  44. }
  45. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top