Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script>
- import { Line, mixins } from 'vue-chartjs'
- const { reactiveProp } = mixins
- export default {
- mixins: [reactiveProp],
- 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement