更新從chart.js之圖表中VUE

Question

我在創建chart.This我VUE應用程序有一個功能圖表功能：

startChart: function (canvas, type) { 

    // init chart.js 
    var ctx = document.getElementById("myChart"); 
    var myDoughnut = new Chart(ctx, { 
     type: 'doughnut', 
     data: { 
      labels: this.getAnalyticList[this.getRowIndex].chartNames, 
      datasets: [{ 
       data: this.getAnalyticList[this.getRowIndex].chartData, 
       backgroundColor: [ 
        'rgba(255, 99, 132, 0.6)', 
        'rgba(54, 162, 235, 0.6)', 
        'rgba(255, 206, 86, 0.6)', 
        'rgba(75, 192, 192, 0.6)', 
        'rgba(153, 102, 255, 0.6)', 
        'red', 
        'yellow', 
        'blue', 
        'green', 
        'orange', 
        'teal', 
        'violet', 
        'pink', 
        'purple' 
       ] 
      }] 
     }, 
     options: { 
      responsive: true, 
      defaultFontColor: '#ffffff', 

     } 
    }) 
} 

，然後我在VUE開始它安裝鉤使用本線

this.startChart(this.$refs.canvas, 'Doughnut'); 

我想要做的就是把圖表上方裝表的行索引，然後將被傳遞到了加載圖表，所以我可以從同一個列表抓住不同陣列的getAnalyticList值。我正在創建一個更新功能，我從這個stack article得到這個js fiddle。我一直在努力適應他到VUE創建的函數，但我在這裏有沒有運氣的功能是：

changeData: function() { 
      var myChart = Chart.doughnut(this.$refs.canvas, { 
       data: data, 
      }); 
      myChart.data.datasets.data = this.getAnalyticList[this.getRowIndex].chartData; 
      myChart.data.labels = this.getAnalyticList[this.getRowIndex].chartNames; 
      myChart.update(); 
     } 

任何建議，將不勝感激。

Answer 1

我認爲你的代碼唯一的問題是你沒有正確更新數據集。 使用myChart.data.datasets.data = ...您將數據添加到數據集對象 - 它應該是myChart.data.datasets[0].data = ...。

我還將圖表對象添加到了startChart的Vue.js模型中，因爲它需要手動更新。只是不要將其添加到數據鉤子。因此，您可以在更新方法中使用this.myChart參考圖表。

我在演示中將getRowIndex重命名，因爲rowIndex更具可讀性 - 您可以使用getAnalyticsLists。如果它是一種獲取某些東西的方法，我會用get-prefix命名它。

在演示中向下滾動以切換下一個按鈕的數據。該按鈕增量爲rowIndex，最後翻轉。

請看下面的演示或在jsfiddle。

const chartComponent = { 
 
    data() { 
 
     return { 
 
     //myChart: undefined, // don't add chart here -> reactivity could be a problem 
 
     getAnalyticList: [{ 
 
      chartNames: [ 
 
      'Red', 
 
      'Yellow', 
 
      'Blue' 
 
      ], 
 
      chartData: [10, 20, 30] 
 
     }, 
 
     { 
 
      chartNames: [ 
 
      'Red', 
 
      'Yellow', 
 
      'Blue' 
 
      ], 
 
      chartData: [40, 10, 20] 
 
     } 
 
     ], 
 
     rowIndex: 0 
 
     } 
 
    }, 
 
    template: ` 
 
    <div> 
 
    \t <canvas id="myChart" width="200px" height="200px"></canvas> 
 
    <button @click="incRow">next</button> 
 
    {{rowIndex}} 
 
    </div> 
 
    `, 
 
    methods: { 
 
     startChart: function() { 
 
     var ctx = document.getElementById("myChart"); 
 
     var myDoughnut = this.myChart = new Chart(ctx, { 
 
      type: 'doughnut', 
 
      data: { 
 
      labels: this.getAnalyticList[this.rowIndex].chartNames, 
 
      datasets: [{ 
 
       data: this.getAnalyticList[this.rowIndex].chartData, 
 
       backgroundColor: [ 
 
       'rgba(255, 99, 132, 0.6)', 
 
       'rgba(54, 162, 235, 0.6)', 
 
       'rgba(255, 206, 86, 0.6)', 
 
       'rgba(75, 192, 192, 0.6)', 
 
       'rgba(153, 102, 255, 0.6)', 
 
       'red', 
 
       'yellow', 
 
       'blue', 
 
       'green', 
 
       'orange', 
 
       'teal', 
 
       'violet', 
 
       'pink', 
 
       'purple' 
 
       ] 
 
      }] 
 
      }, 
 
      options: { 
 
      responsive: true, 
 
      defaultFontColor: '#ffffff', 
 
\t \t \t \t \t \t 
 
      } 
 
     }) 
 
     }, 
 
     incRow() { 
 
     \t if (this.rowIndex < this.getAnalyticList.length - 1) { 
 
     \t this.rowIndex++; 
 
     } 
 
     else { 
 
     \t this.rowIndex = 0; 
 
     } 
 
     this.changeData() 
 
     }, 
 
     changeData() { 
 
     \t this.myChart.data.datasets[0].data = 
 
     \t this.getAnalyticList[this.rowIndex].chartData; 
 
     this.myChart.data.labels = this.getAnalyticList[this.rowIndex].chartNames; 
 
     this.myChart.update(); 
 
     console.log('changed', this.myChart.data) 
 
     } 
 
    }, 
 
    mounted() { 
 
     console.log('started') 
 
     this.startChart(); 
 
    } 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    chart: chartComponent 
 
    } 
 
})

div { 
 
    width: 400px; 
 
    height: 400px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script> 
 
<div id="app"> 
 
    <chart></chart> 
 
</div>