更新从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>