我的 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 小提琴。我一直在尝试将他创建的函数调整到 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();
}
任何建议，将不胜感激。
我认为您的代码唯一的问题是您没有正确更新数据集。随着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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句