Vue3脚本设置ChartJS不使用React数据渲染

5f0d552i  于 6个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(65)

作为大多数建议,我从论坛上读到的是使用计算或 prop 时,试图传递一个React值的图表数据。我已经这样做了,但问题是图表甚至不显示。

<script setup>
import { partnerState } from '@/state/partnerState.js';
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
import {computed, reactive, ref} from 'vue';
import { Bar } from 'vue-chartjs';
import {storeToRefs} from "pinia";

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);

const options = reactive({
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        ...
    },
    plugins: {
        ...
    }
});

const state = partnerState();
const stateData = storeToRefs(state); //using storeToRef to convert state to reactive
if (state.partnerAnalysis === null) {
    await state.getPartnerAnalysis();
}
const data = computed(() => ({
    labels: Object.keys(stateData.partnerAnalysis.newPurchases) // this returns an array of labels,
    datasets: [
        {
           ...
        },
        {
           ...
        }
    ]
}));
</script>

<template>
    <Bar id="partner-analysis-chart" :options="options" :data="data" />
</template>

字符串
当图表已经设置为计算并且我也能够从API检索数据时,图表不呈现的原因是什么?
相关文章我读过:Pinia ChartJs Vue3 & Computed Chartjs Vue3

e4yzc0pl

e4yzc0pl1#

在呈现图表之前,您必须确保要传递给图表的数据可用。
https://vue-chartjs.org/guide/#chart-with-api-data

相关问题