Vue用Chart.js所遇到問題

發表於 | 分類於 ，


因為面試的期間整個腦袋炸裂，所以幾乎有一個月沒寫程式，最近有個視覺化專案，寫起來卡卡的然後自己調皮，不用別人封裝好的vue-chart.js,所以遇到一些問題就記錄起來，加上忘記一些Vue用法趁這機會紀錄一下。

數據問題

我是把Chart做成一個component，透過axios獲取後端數據，props傳入給數值，但是怎麼傳都沒數據進去，更改數據也沒顯示，但是console都是有數值的。到底是為啥哩?結果自己太久沒寫(藉口其實忘了)耍笨，我axios拿到值，放到data設值跟更新值直接這樣操作。

1
2
3
4
for (let item in response.data) {
    vm.datasets[0].Datatime=response.data[item].DataTime.substring(11)
    .....
}

沒錯直接設值，耍笨呀Vue文件提到陣列需要重新渲染 ，方法有push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
所以我原本數值更新了，但沒有重新渲染阿!!所以改成底下樣子就能囉~~

運用set方式

1
vm.$set(vm.datasets[0].Datatime,item,response.data[item].DataTime.substring(11))

運用push方式

1
vm.datasets[0].Datatime.push(response.data[item].DataTime.substring(11));

不過要注意記得每次更新要清空阿!!set如果數據長度沒什麼改變或許沒什麼感覺(有改變也會出事)，但是push你會越塞越大包呀。

Chart圖抽筋

終於解決了數值問題，圖案漂漂亮亮的出來了，滑鼠仔細看著數據中，突然圖閃爍了一下，跑出了上
一個數據圖，發生什麼事情了!!難道這是。

沒錯是替身攻擊(並不是)，單純只是文件沒看，原來Chart.js再重新渲染、重新獲取數據時須搭配destory()、update()來刷掉舊的canvas，那我們要再什麼時候銷毀呢?沒錯我們props、axios得到值之後，所以我們要用watch來觀察數據。

1
2
3
4
5
6
7
8
9
watch: {
    Data: {
      handler(datanew,dataold){
        this.myCharts.destroy()//this.myCharts = new Chart(ctx1, {})我把這東西傳入data比較好操作。
        this.renderchart()
      },
      deep:true
    },
  },

在每次傳入的data做監控，並且銷毀在重新render。這樣就行啦~~