t[this.activeSeriesIndex].data[0] 在 ApexCharts 中未定义。如何正确构建系列数组？

Question

我是 Vue 的初学者，我正在使用 vue-apex 图表在我的应用程序中创建图表。我想在图表中显示我通过特定方法 (computeStat()) 计算的两个组件属性 "uncorrectAns" 和 "correctAns" 的值。


<template>
  <apexcharts width="500" type="bar" :options="chartOptions" :series="series"></apexcharts>
</template>

<script>
export default {
  name: 'Results',
  components: {
    apexcharts: VueApexCharts
  },

  data() {
    return {
      results: '',
      correctAns: 0,
      uncorrectAns: 0,
      chartOptions: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: ['Correct Answers', 'Uncorrect Answers']
        }
      },
      series: [
        {
          name: 'series-1',
          data: [this.correctAns, this.uncorrectAns]
        }
      ]
    }
  },

  methods: {
    computeStat() {
      var i
      for (i = 0; i < this.results.length; i = i + 1) {
        if (this.results[i].answerCorrect == true) {
          this.correctAns = this.correctAns + 1
        } else {
          this.uncorrectAns = this.uncorrectAns + 1
        }
      }
    }
  },

  created() {
    this.results = this.$route.params.output
    this.computeStat()
    var i
    for (i = 0; i < this.results.length; i = i + 1) {
      console.log('bestPractice ' + i + ':' + this.results[i].bestPract)
    }
  }
}
</script>

当我运行应用程序时，图表未显示，我在浏览器控制台上收到此错误消息：

我想知道这个错误的性质，以及是否有在图表中显示 "correctAns" 和 "uncorrectAns" 值的正确方法。

Answer 1

您的 series 属性...

存在一些问题

当你定义series时，this.correctAns和this.uncorrectAns都是undefined（这是你问题的根源）
因为 series 是静态定义的，它永远不会在您对 this.correctAns 和 this.uncorrectAns

解决方案是将 series 转换为计算值属性。从 data 中删除并添加

computed: {
  series () {
    return [
      {
        name: 'series-1',
        data: [this.correctAns, this.uncorrectAns]
      }
    ]
  }
}

演示~https://jsfiddle.net/ynLfabdz/

鉴于您似乎将 results 视为一个数组，您应该这样初始化它而不是一个空字符串，即

results: [], // not ''

t[this.activeSeriesIndex].data[0] 在 ApexCharts 中未定义。如何正确构建系列数组？

t[this.activeSeriesIndex].data[0] is undefined in ApexCharts. How to correctly build the series array?

javascript

typeerror

vue.js

vuejs2

apexcharts