时间戳

首页 > 解决方案 > Vue-ChartJS - JSON 的循环结构

javascript - Vue-ChartJS - JSON 的循环结构

问题描述

我正在使用Vue-Chartjs lib，并且正在尝试制作折线图。好吧，我已经用下面的代码完成了它，它有效！图表已绘制。但是，当我更改我内部的任何变量的值时Vue Data（如示例中的此test输入）。它在控制台中评估此错误。我认为这是因为 VueChartJS，因为如果我删除图表，一切正常。

TypeError：将循环结构转换为 JSON

line.js

import {Line, mixins} from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
   extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
   mounted() {
      this.renderChart(this.chartData, this.options);
   }
}

仪表板.vue

<line-chart :chart-data="dataCollection" :height="100"></line-chart>
 <input v-model="test">

   import LineChart from './line-chart.js';
   export default {
      components: {LineChart},
      data: () => ({ 
         dataCollection:  {},
         test: "some input" 
      }),
      created () { 
         this.dataCollection =  {
                  "labels": ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00"],
                  "datasets": [{
                     "label": "Test",
                     "backgroundColor": "#00CC6A",
                     "borderColor": "#00CC6A",
                     "data": [0, 23, 51.75, 27, 34, 12]
                  }]
               }
        }
    }

我究竟做错了什么？

谢谢！！=)

标签： javascriptvue.jsvue-chartjs

解决方案

根据您的沙箱，我猜问题是您试图在模板中输出数据集合。

如果chart.js 数据对象包含一个循环结构，（在childobject 某处引用该对象），这可能会导致错误。

因为如果你在你的 vue 模板中打印出对象，vue 在后台使用 JSON.stringify()。其中无法解析圆形结构。

推荐阅读