Question

我正在尝试向页面动态添加x个图表。

在我的模板中，我有：

<canvas v-for="(data, index) of chartData" :key="index" :id="'chart' + index"></canvas>

然后在我的Vue脚本中，我拥有：

const apiURL = "http://localhost:8888/data"
export default {
  name: 'Home',

  data() {
    return {
      chartData: []
    }
  },

  async created() {
   

    try {
      const res = await axios.get(apiURL + '/running');
      this.chartData = res.data;
      let index = 0
      this.chartData.forEach( it => {
        console.log("Adding chart " + index)
        this.createChart('chart'+index, it)
        index++
      })
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    createChart(chartId, chartData) {
      const ctx = document.getElementById(chartId);
      // eslint-disable-next-line no-unused-vars
      const myChart = new Chart(ctx, {
        type: chartData.type,
        data: chartData.data,
        options: chartData.options,
      });
    }
  },

TypeError: Cannot read property 'length' of null
    at Object.acquireContext (Chart.js?30ef:7756)
    at Chart.construct (Chart.js?30ef:9324)
    at new Chart (Chart.js?30ef:9311)
    at Proxy.createChart (Home.vue?bb51:84)
    at eval (Home.vue?bb51:64)
    at Proxy.forEach (<anonymous>)
    at _callee$ (Home.vue?bb51:62)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)

来源有：

<canvas id="chart0" data-v-fae5bece=""></canvas>
<canvas id="chart1" data-v-fae5bece=""></canvas>

但是，如果我不做v-for而是手动创建两个div，因为我知道此模拟数据有2个图表，则可以正确显示。显然，数据可以正确返回，并且createChart方法有效，问题似乎是canvas div直到调用createChart方法之后才创建，因此它没有有放置它们的元素。

如何动态创建图表画布”并将动态图表数据添加到页面？

使用Vue从api数据创建x个chart.js图表

0 个答案: