在 vue 中从 chart.js 更新图表

Question

我的 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 值中，这样我就可以从同一个列表中获取不同的数组。我正在创建一个更新功能，我从这个js fiddle 得到了这个stack article。我一直在尝试将他创建的函数改编为 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>
  	<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',
						
          }
        })
      },
      incRow () {
      	if (this.rowIndex < this.getAnalyticList.length - 1) {
        	this.rowIndex++;
        }
        else {
        	this.rowIndex = 0;
        }
        this.changeData()
      },
      changeData () {
      	this.myChart.data.datasets[0].data =
        	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>