只是想知道当涉及到来自 vuex 的动态数据并将其应用于 vue-chart.js 中的雷达图时，是否有人可以为我指出正确的方向。
下面是我的 vue 文件。
<template>
<div>
<h1>Chart Demo</h1>
<v-card class="question card__text pa-sm-5 py-5 px-2">
<div>
<radar-chart :data="radarChartData" :options="radarChartOptions" :height="400" />
</div>
</v-card>
<v-container fluid>
<v-row dense>
<v-col
v-for="card in getCards"
:key="card.id"
cols="12"
:sm="card.flex"
xs="1"
>
<v-card>
<v-card-title class="title" v-text="card.title">
</v-card-title>
<p class="pa-4">Importance: {{ card.importance }} <br />
Effectiveness: {{ card.effectiveness }} </p>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
import { mapGetters } from "vuex"
import RadarChart from "~/components/RadarChart"
export default {
layout: "tabs",
components: {
RadarChart,
},
data() {
return {
radarChartOptions: {
responsive: true,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
display: false,
min: 0,
max: 10,
},
gridLines: {
display: false,
},
scaleLabel: {
display: false,
}
}
],
xAxes: [
{
gridLines: {
display: false,
},
}
]
}
},
/* radarChartData: {
labels: [
"Personal Growth",
"Work",
"Leisure",
"Health",
"Community",
"Family",
"Parenting",
"Intimate",
"Social",
"Spirituality",
],
datasets: [
{
label: "Importance",
backgroundColor: 'rgb(54, 162, 235, 0.75)',
data: [9, 8, 8, 9, 4, 6, 2, 8, 9, 5],
},
{
label: "Effectiveness",
backgroundColor: 'rgb(75, 192, 192, 0.75)',
data: [7, 7, 7, 6, 3, 5, 10, 6, 7, 4],
},
]
} */
}
},
computed: {
...mapGetters("cards", ["getCards"]),
//...mapState(["getCards"]),
barChartData() {
return {
labels: ['Importance', 'Effectiveness'],
datasets: [
{
// backgroundColor: ["red", "orange", "yellow"],
backgroundColor: [chartColors.blue, chartColors.green],
data: [this.importance, this.effectiveness]
}
]
}
},
radarChartData() {
return {
labels: [
"Personal Growth",
"Work",
"Leisure",
"Health",
"Community",
"Family",
"Parenting",
"Intimate",
"Social",
"Spirituality",
],
datasets: [
{
label: "Importance",
backgroundColor: 'rgb(54, 162, 235, 0.75)',
data: [9, 8, 8, 9, 4, 6, 2, 8, 9, 5],
},
{
label: "Effectiveness",
backgroundColor: 'rgb(75, 192, 192, 0.75)',
data: [7, 7, 7, 6, 3, 5, 10, 6, 7, 4],
},
]
}
},
card() {
return this.getCards.find((el) => el.id === this.id)
},
effectiveness: {
get() {
return this.card.effectiveness
},
set(effectiveness) {
this.$store.commit("cards/updateEffectiveness", { card: this.card, effectiveness})
},
},
importance: {
get() {
return this.card.importance
},
set(importance) {
this.$store.commit("cards/updateImportance", { card: this.card, importance})
},
},
keywords: {
get() {
return this.card.keywords
},
set(keywords) {
this.$store.commit("cards/updateKeywords", { card: this.card, keywords})
}
}
},
/* computed: {
radarChartData() {
return {
labels: [
"Personal Growth",
"Work",
"Leisure",
"Health",
"Community",
"Family",
"Parenting",
"Intimate Relationships",
"Social",
"Spirituality",
],
datasets: [
{
// backgroundColor: ["red", "orange", "yellow"],
data: [9, 8, 8, 9, 4, 6, 2, 8, 9, 5],
}
]
}
},
}*/
}
</script>
雷达图下方是一系列卡片，它们动态显示我也想用于雷达图的信息。我可以获取卡片显示的信息，但不能获取雷达图。
我猜我错过了一些非常明显的东西，而且我知道我必须以某种方式引用card.id，但我不知道该怎么做。我尝试过在雷达图标签上进行 :key 绑定(bind)，但这会引发错误:
“卡”未定义
下面是我的商店 js 文件中的商店数据数组:
import createPersistedState from "vuex-persistedstate"
export const state = () => ({
cards: [
{
title: “Personal Growth”,
src: require("~/assets/images/values/growth.svg"),
flex: 6,
id: “1”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Leisure”,
src: require("~/assets/images/customize.svg"),
flex: 6,
id: “2”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Sprituality”,
src: require("~/assets/images/values/spirituality.svg"),
flex: 6,
id: “3”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Work”,
src: require("~/assets/images/values/work.svg"),
flex: 6,
id: “4”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Health”,
src: require("~/assets/images/values/health.svg"),
flex: 6,
id: “5”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Community \n& Environment”,
src: require("~/assets/images/values/community.svg"),
flex: 6,
id: “6”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Family Relationships”,
src: require("~/assets/images/values/family.svg"),
flex: 6,
id: “7”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Social Relationships”,
src: require("~/assets/images/values/social.svg"),
flex: 6,
id: “8”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Intimate Relationships”,
src: require("~/assets/images/values/intimate.svg"),
flex: 6,
id: “9”,
keywords: [],
importance: “”,
effectiveness: “”,
},
{
title: “Parenting”,
src: require("~/assets/images/values/parenting.svg"),
flex: 6,
id: “10”,
keywords: [],
importance: “”,
effectiveness: “”,
},
],
})
export const plugins = [createPersistedState()]
export const getters = {
getCards: (state) => {
return state.cards
},
}
export const mutations = {
updateEffectiveness(state, {card, effectiveness}) {
card.effectiveness = effectiveness
},
updateImportance(state, {card, importance}) {
card.importance = importance
},
updateKeywords(state, {card, keywords}) {
card.keywords = keywords
}
}
欢迎任何提示、建议，感谢您的帮助! :)
随附了雷达图与静态数据的屏幕截图。
最佳答案
您可以使用 reactiveProp 和 reactiveData 使图表具有反应性。请参阅Updating Charts了解更多详情。
对于 reactiveProp，它只是创建一个名为 chartData 的 prop，并在该 prop 上添加一个 vue 监视，然后在该 prop 时调用 renderChart()改变了。
RadarChart.vue 示例:
<script>
import { Radar, mixins } from "vue-chartjs";
export default {
extends: Radar,
mixins: [mixins.reactiveProp],
props: ["options"],
mounted() {
this.renderChart(this.chartData, this.options);
}
};
</script>
然后使用组件:
<radar-chart :chart-data="radarChartData" :options="radarChartOptions"/>
CodeSandbox Example
关于vue.js - Vue Chart js 动态雷达图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63620372/