基于带有vue chart.js数组的多个图表和数据集

编程问答 2022-07-13

问题描述

我想使用vue-chartjs在Vue中基于数组创建多个图表 示例数组：

arr:
[
 {
  "id": 1,"name": "Name 1"
 }
 {
  "id": 2,"name": "Name 2"
 }
]

然后我想要两个（或更多，基于数组中的项目数）图表，每个图表都有自己的数据集，这样我就可以将不同的数据添加到购物车中：

<line-chart
 v-for="item in arr"
 :bind="item.id"
 :chart-data="dataset[item.id]"
/>

然后我要为数组中的每个项目提供一个数据集，因此在这种情况下：

data: () => ({
 datataset: [
  1: {
   // data for first chart here
  }
  2: {
   // data for second chart here
  }
 ]
})

当我尝试进行:chart-data="dataset[item.id]"并创建类似这样的数据集时：

for (let i = 0; 1 < this.arr.length; i++) {
 this.dataset[this.arr[i].id] = []
}

我收到以下错误：

vue.common.dev.js?4650:630 [Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot set property '1' of null"

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

arraysarraysjavascriptvue-chartjsvue.js