作为大多数建议,我从论坛上读到的是使用计算或 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
1条答案
按热度按时间e4yzc0pl1#
在呈现图表之前,您必须确保要传递给图表的数据可用。
https://vue-chartjs.org/guide/#chart-with-api-data