将数组放入图表数据

Question

我在我的 Vue3 应用程序中使用 vue3-chart-v2。我想用数组代替预定义的数字。

有人可以帮我吗？

这是我的图表组件：

<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'

export default defineComponent({
  name: 'ChanceChart',
  extends: Line,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false
    },
  },
  mounted () {
    this.renderChart(this.chartData, this.chartOptions)
  }
})
</script>

这是它在应用中的样子：

<template>
  <Navigation />
  <div>
        <ChanceChart :chartData="state.chartData"/>
  </div>
</template>

<script>
import ChanceChart from '../components/ChanceChart.vue';

export default {
  components: {
    ChanceChart
  },

  data() {
    return {
      enemysCards : [1610, 169, 168, 167, 330, 329, 328, 327, 326, 325, 324, 323, 1, 1610, 1600, 169, 168, 167, 1610, 1600, 169, 168, 167, 11],
      state: {
        chartData: {
          datasets: [
            {
              label: "Enemy's Chance",
              borderColor: '#1161ed',
              data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190]
            },
            {
              label: 'My Chance',
              borderColor: '#f87979',
              color: '#fff',
              data: [60,60,60,60,60,60,60,60,60,60,60,60, 60]
            }
          ],
          labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
        },
        chartOptions: {
          responsive: true
        }
      }
    }
  }

例如，我想在数据中使用 enemysCards 数组，在标签中使用 enemysCards.lenght。

Answer 1

使用计算属性代替数据属性 :

export default {
  components: {
    ChanceChart
  },

  computed: {
    chartData(){
        return {
          datasets: [
            {
              label: "Enemy's Chance",
              borderColor: '#1161ed',
              data: this.myFirstArray // <- here
            },
            {
              label: 'My Chance',
              borderColor: '#f87979',
              color: '#fff',
              data: this.mySecondArray // <- here
            }
          ],
          labels: this.ennemyCards.map((x, index) => index + 1) // here you can calculate your labels
        },
        chartOptions: {
          responsive: true
        }
      }
  }

  data() {
    return {
      enemysCards : [1610, 169, 168, 167, 330, 329, 328, 327, 326, 325, 324, 323, 1, 1610, 1600, 169, 168, 167, 1610, 1600, 169, 168, 167, 11],
      myFirstArray: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190],
      mySecondArray: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190],
    }
  }

将数组放入图表数据

Put array in chart data

vue.js

chart.js