Vue chart JS动态雷达图

问题描述

只是想知道在涉及来自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,9,4,6,2,5],{
            label: "Effectiveness",backgroundColor: 'rgb(75,192,data: [7,7,3,5,10,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",]
      }
    },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",importance})
      },keywords: {
      get() {
        return this.card.keywords
      },set(keywords) {
        this.$store.commit("cards/updateKeywords",keywords})
      }
    }
  },/* computed: {
    radarChartData() {
      return {
        labels: [
        "Personal Growth","Intimate Relationships",}
        ]
      }
    },}*/
}
</script>

雷达图下面的

是一系列卡片，这些卡片可以动态显示我也想用于雷达图的信息。我可以获取要显示的信息，但不能显示雷达图。

我猜我确实缺少一些明显的东西，并且我知道我必须以某种方式引用card.id，但是我不确定该怎么做。我已经在雷达图标签上尝试了：key绑定，但是抛出了错误：

“卡”未定义

以下是我的商店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"),id: “2”,{
title: “Sprituality”,src: require("~/assets/images/values/spirituality.svg"),id: “3”,{
title: “Work”,src: require("~/assets/images/values/work.svg"),id: “4”,{
title: “Health”,src: require("~/assets/images/values/health.svg"),id: “5”,{
title: “Community \n& Environment”,src: require("~/assets/images/values/community.svg"),id: “6”,{
title: “Family Relationships”,src: require("~/assets/images/values/family.svg"),id: “7”,{
title: “Social Relationships”,src: require("~/assets/images/values/social.svg"),id: “8”,{
title: “Intimate Relationships”,src: require("~/assets/images/values/intimate.svg"),id: “9”,{
title: “Parenting”,src: require("~/assets/images/values/parenting.svg"),id: “10”,})

export const plugins = [createPersistedState()]

export const getters = {
  getCards: (state) => {
    return state.cards
  },}

export const mutations = {
  updateEffectiveness(state,{card,effectiveness}) {
    card.effectiveness = effectiveness
  },updateImportance(state,importance}) {
    card.importance = importance
  },updateKeywords(state,keywords}) {
    card.keywords = keywords
  }
}

欢迎提供任何提示，建议，并感谢您的帮助！：）

附有雷达图的静态数据截图。

解决方法

您可以使用reactiveProp和reactiveData来使图表具有反应性。有关更多详细信息，请参见Updating Charts。

对于reactiveProp，它只是创建一个名为chartData的道具，并在该道具上添加一个监视手表，然后在该道具更改时调用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

radar-chart vue-chartjs vue.js