t [this.activeSeriesIndex] .data [0] не определено в ApexCharts. Как правильно построить массив серий? - PullRequest
Новая
       26

t [this.activeSeriesIndex] .data [0] не определено в ApexCharts. Как правильно построить массив серий?

1 голос
/ 17 марта 2020

Я новичок в Vue и использую диаграмму vue -apex для создания диаграммы в своем приложении. Я хочу отобразить на диаграмме значения свойств двух компонентов "uncorrectAns" и "correctAns", которые я вычисляю, благодаря специфицированному c методу (computeStat ()). 


<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>

Когда я запускаю приложение, диаграмма не отображается, и я получаю сообщение об ошибке в консоли браузера:

enter image description here

Я хотел бы знать природу этого ошибка, и если есть правильный способ отображения значений «correctAns» и «uncorrectAns» на диаграмме.

1 Ответ

1 голос
/ 18 марта 2020

Есть несколько проблем, связанных с вашим series свойством ...

  1. Когда вы определяете series, оба значения this.correctAns и this.uncorrectAns равны undefined (это источник вашей проблемы)
  2. Поскольку series определен статически, он никогда не будет обновляться при внесении изменений в this.correctAns и this.uncorrectAns

Решение заключается в преобразовании series в вычисляемое свойство. Удалите его из data и добавьте 

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

Demo ~ https://jsfiddle.net/ynLfabdz/

Учитывая, что вы, похоже, рассматриваете results как массив, Вы должны инициализировать его как таковой вместо пустой строки, ie

results: [], // not ''
...