如何在 Vue Chart.js 中使用 Api 数据

Question

所以我是在应用程序中使用数据可视化的新手，我正在尝试将来自我的 api 的数据设置为圆环图用来显示的数据，但是我不知道如何正确访问数据

我已经安装了 vue-chartjs 来简化它以供组件使用

这里是图表组件

<script>
import { Doughnut } from 'vue-chartjs'
import {mapGetters} from 'vuex'

export default {
    name: 'FirmChart',
    extends: Doughnut,
    computed: {
        ...mapGetters(['chartEngagements']),
    },
    mounted () {
        this.renderChart({
        labels: ['Scanned', 'Recieved', 'Preparation', 'Review', '2nd Review', 'Complete'],
        datasets: [
                {
                label: 'Data One',
                borderColor: 'black',
                pointBackgroundColor: 'white',
                borderWidth: 1,
                pointBorderColor: 'white',
                backgroundColor: [
                    '#0077ff', 
                    '#0022ff',
                    '#1133bb',
                    '#0088aa',
                    '#11ffdd',
                    '#aabbcc',
                    '#22aabb',
                    ],
                data: [
                    10,
                    10,
                    10,
                    10,
                    10,
                    10,
                    ]
                },
            ]
        }, {responsive: true, maintainAspectRatio: false});
    },
    created() {
        this.$store.dispatch('retrieveEngagementsChartData')
    }
}
</script>

现在我的数据来自chartEngagements getter，这是该数据在控制台中的显示

{Complete: Array(1), Review: Array(3), 2nd Review: Array(1), Recieved: Array(7), Preparation: Array(1), …}

我的问题是如何在我的this.renderChart() 方法中将Complete: Array(1) 等设置为data[] 属性？？

我尝试过这样做，但它不会显示任何内容

mounted () {
        this.renderChart({
        labels: ['Scanned', 'Recieved', 'Preparation', 'Review', '2nd Review' 'Complete'],
        datasets: [
                {
                label: 'Data One',
                borderColor: 'black',
                pointBackgroundColor: 'white',
                borderWidth: 1,
                pointBorderColor: 'white',
                backgroundColor: [
                    '#0077ff', 
                    '#0022ff',
                    '#1133bb',
                    '#0088aa',
                    '#11ffdd',
                    '#aabbcc',
                    '#22aabb',
                    ],
                data: [
                    this.chartEngagements.complete,
                    this.chartEngagements.review,
                    this.chartEngagements.2ndreview,
                    this.chartEngagements.preparation,
                    this.chartEngagements.recieved,
                    this.chartEngagements.scanned,
                    ]
                },
            ]
        }, {responsive: true, maintainAspectRatio: false});

但是它没有显示任何内容.. 任何帮助将不胜感激或指出正确的方向！

Answer 1

您是否查看过文档中的示例？ https://vue-chartjs.org/guide/#chart-with-api-data

您的问题是，您的数据 api 调用是异步的。因此，即使您的数据没有完全加载，您的图表也会被渲染。

还有一个 vuex 的例子，有点过时了https://github.com/apertureless/vue-chartjs-vuex

在渲染图表之前，您必须确保数据已完全加载。

Answer 2

在我正在开发的一个 Vue JS 应用程序中使用 API 数据实现图表时，我遇到了类似的问题。我正在使用 Vuex 进行状态管理，解决此问题的一个简单方法是将“chartData”从“数据”移动到“计算”，这将使其具有反应性。以下是我的应用程序的示例代码。

<template>  
    <line-chart v-if="chartData"
      style="height: 100%"
      chart-id="big-line-chart"
      :chart-data="chartData"
      :extra-options="extraOptions"
    >
    </line-chart>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import * as expenseTypes from '../../store/modules/expense/expense-types';
import * as chartConfig from "../../components/reports/chart.config";
import BarChart from "../../components/reports/BarChart";

export default {
  components: {
    BarChart,
  },
  data () {
    return {
      extraOptions: chartConfig.chartOptionsMain
    }
  },
  computed: {
    ...mapGetters({
      allExpenses: expenseTypes.GET_ALL_EXPENSES,
      expenseCount: expenseTypes.GET_EXPENSE_COUNT,
    }),
    expenseAmount() {
      let expenseAmount = [];
      this.allExpenses.map((item) => {
        expenseAmount.push(item.amount);
      })
      return expenseAmount;
    },
    expenseLabels() {
      let expenseLabels = [];
      this.allExpenses.map((item) => {
        expenseLabels.push(item.note);
      })
      return expenseLabels;
    },
    chartData() {
      return {
        datasets: [
          {
            data: this.expenseAmount
          },
        ],
        labels: this.expenseLabels
      }
    }
  },
  async mounted() {
    await this.getAllExpenses();
    await this.fillChartData();
  },
  methods: {
    ...mapActions({
      getAllExpenses: expenseTypes.GET_ALL_EXPENSES_ACTION,
    }),
  },
};
</script>