Question

只是想知道在涉及来自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绑定，但是抛出了错误：

“卡”未定义

以下是我的商店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
  }
}

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

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

Answer 1

您可以使用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

Vue chart JS动态雷达图

1 个答案: