Last active
April 13, 2019 11:27
-
-
Save linxinemily/1290879f679206aaca1048d4748342f7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
import { Line } from 'vue-chartjs' | |
export default { | |
extends: Line, | |
props: { //待會會從父組件傳入圖表資料 | |
chartData: { | |
type: Object, | |
default: () => {} | |
} | |
}, | |
data: () => ({ | |
options: { // option 類似圖表的 config 檔,可以在此客製圖表樣式及其他細節 | |
responsive: true, | |
maintainAspectRatio: false, | |
scales: { | |
yAxes: [ | |
{ | |
ticks: { | |
stepSize: 1 // 設定 y 軸的數字級距 | |
} | |
} | |
] | |
} | |
} | |
}), | |
watch: { // 只要 chartData 改變,就要重新渲染圖表 | |
chartData() { | |
this.$data._chart.destroy() // 官方文件 api 提供的 destroy() 方法 | |
this.renderLineChart() // 客製重新渲染圖表的 function | |
}, | |
deep: true | |
}, | |
mounted() { | |
this.renderLineChart() // 首次渲染圖表的 function 寫在 mounted,此處把 renderChart 拉成獨立的 function 因為會重複使用 | |
}, | |
methods: { | |
renderLineChart() { | |
this.renderChart(this.chartData, this.options) // 官方文件 api 提供的 renderChart() 方法,一定需要這兩個參數 | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment