如何在 vue 中更新 chart.js

Question

我創建了一個 chart.js vue 組件，它使用一些通過道具傳遞給它的數據進行渲染。 現在我希望能夠在數據發生變化時調用圖表上的 update() 方法。 我的問題是，由於我的代碼的結構方式，我無法執行通常的 chart.update() 方法，因為我無法從創建它的 function 外部訪問圖表變量。如何重組我的代碼以便我可以調用圖表上的更新方法？

在數據發生變化的那一刻，我只調用初始渲染 function 導致圖表彼此分層。 這可以在您更改數據時看到，然后在圖表上更改 hover。

 Vue.component('chart', { template: '<canvas id="chart"></canvas>', props: { savings: Object, }, watch: { savings: { deep: true, handler() { console.log('Update Chart'); this.createChart(); } } }, methods: { createChart() { new Chart(document.getElementById("chart"), { type: 'bar', data: { datasets: [{ label: 'Bar Dataset', data: [ this.savings.annual[0], this.savings.annual[1], this.savings.annual[2], this.savings.annual[3], this.savings.annual[4] ] }, { label: 'Line Dataset', data: [ this.savings.cumulative[0], this.savings.cumulative[1], this.savings.cumulative[2], this.savings.cumulative[3], this.savings.cumulative[4] ], type: 'line' }], labels: ['Year One', 'Year Two', 'Year Three', 'Year Four', 'Year Five'] } }); } }, mounted() { this.createChart(); console.log(this.totals); } }); var app1 = new Vue({ el: '#savings_calculator', data: { savings: { annual: [123,345,234,234,523], cumulative: [234,523,234,423,100], } }, methods: { changeData() { for(let i = 0; i < 5; i++) { Vue.set(this.savings.annual, i, Math.floor((Math.random() * 1000) + 1)); Vue.set(this.savings.cumulative, i, Math.floor((Math.random() * 1000) + 1)); } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="savings_calculator"> <div class="input container"> <button v-on:click="changeData">Change Data</button> <chart v-bind:savings="savings" /> </div> </div>

我在 WordPress 工作，我已經包含了 chart.js 庫，方法是將代碼復制到我的一個 js 文件中，這些文件都被 Z3DEDCC7065E40F09291129B3FBE52F76 壓縮並壓縮到一個文件中。 我之所以提到這一點，是因為我見過人們使用 import 來包含庫的示例。 我確實將庫下載到我的 node_modules 中，但我無法讓導入在我的 js 文件中工作。 它給了我以下錯誤：

“Uncaught SyntaxError: Cannot use import statement outside a module” 

Answer 1

這個問題主要是因為您在調用createChart()方法時在同一個canvas上繪制多個圖表。 您只需要調用.destroy()方法來銷毀任何已創建的圖表實例。 這將清除存儲到 Chart.js 中圖表 object 的所有引用，以及由 Chart.js 附加的任何關聯事件偵聽器。 這必須在 canvas 重新用於新圖表之前調用。

因此，只需添加一個新的數據選項來存儲當前圖表實例，例如：

data(){
  return{
    chart: null
  }
},

然后存儲圖表實例，如：

 createChart() {
    this.chart = new Chart(document.getElementById("chart"), {
    ...

並在調用this.createChart();之前在watch內部； 利用：

  this.chart.destroy();
  this.createChart();

工作演示：

 Vue.component('chart', { template: '<canvas id="chart"></canvas>', props: { savings: Object, }, data(){ return{ chart: null } }, watch: { savings: { deep: true, handler() { console.clear(); console.log('Update Chart'); this.chart.destroy(); this.createChart(); } } }, methods: { createChart() { this.chart = new Chart(document.getElementById("chart"), { type: 'bar', data: { datasets: [{ label: 'Bar Dataset', data: [...this.savings.annual] }, { label: 'Line Dataset', data: [...this.savings.cumulative], type: 'line' }], labels: ['Year One', 'Year Two', 'Year Three', 'Year Four', 'Year Five'] } }); } }, mounted() { this.createChart(); //console.log(this.totals); } }); var app1 = new Vue({ el: '#savings_calculator', data: { savings: { annual: [123, 345, 234, 234, 523], cumulative: [234, 523, 234, 423, 100], } }, methods: { changeData() { for (let i = 0; i < 5; i++) { Vue.set(this.savings.annual, i, Math.floor((Math.random() * 1000) + 1)); Vue.set(this.savings.cumulative, i, Math.floor((Math.random() * 1000) + 1)); } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="savings_calculator"> <div class="input container"> <button v-on:click="changeData">Change Data</button> <chart v-bind:savings="savings" /> </div> </div>