Vue Chart.js와 함께 API 데이터를 사용하는 방법

Vue Chart.js와 함께 API 데이터를 사용하는 방법

그래서 나는 어플리케이션에서 데이터 시각화를 사용하는 것에 익숙하지 않고 내 api에서 오는 데이터를 도너츠 차트가 표시하는 데 사용하는 데이터로 설정하려고 하지만 어떻게 데이터에 적절하게 접속하는지는 알 수 없다.

구성 요소 사용을 위해 단순화하는 방법으로 vue-chartj를 설치했다.

차트 구성 요소

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

이제 내 데이터는 다음에서 나온다.chartEngagementsGetter(게터) 그리고 이것은

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

내 질문은 어떻게 하면Complete: Array(1)에 이르기까지data[]내 탓으로 돌리다this.renderChart()방법?

나는 이런 일을 해 보았지만 아무것도 보이지 않을 것이다.

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});

하지만 아무것도 보이지 않는다.어떤 도움이라도 매우 고맙게 생각하거나 올바른 방향으로 한 점을 지적할 것이다.

문서에 있는 예시들을 확인해 보셨나요?https://vue-chartjs.org/guide/#chart-with-api-data

문제는 데이터 api 호출이 비동기적이라는 겁니다.따라서 데이터가 완전히 로드되지 않더라도 차트가 렌더링됨

https://github.com/apertureless/vue-chartjs-vuex에는 좀 구식인 vuex의 사례도 있다.

차트를 렌더링하기 전에 데이터가 완전히 로드되었는지 확인하십시오.

내가 작업하던 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>

참조URL: https://stackoverflow.com/questions/52860708/how-to-use-api-data-with-vue-chart-js