是否可以根据父组件的属性在extends:属性中动态添加图表类型? [英] Is it possible to dynamically add chart type in the extends: property, based on props from parent component?

问题描述

我有一个vue chartjs组件，可以导入整个vue-chartjs库.我的想法是，是否可以通过某种方式传递我想要的图表类型并将其添加到扩展:VueCharts.charttype?"中.在我提供的示例中，它扩展了VueCharts.Line，我需要将此属性动态插入并从props传递.这种图表类型是否有可能动态地来自父道具，又如何?

I have a vue chartjs component which imports the whole vue-chartjs library. My idea is, is it possible to somehow pass the type of the chart which I want and add it to the 'extends: VueCharts.charttype?.' In the example I provide it extends the VueCharts.Line, I need this property to be dynamically interpolated, passed from props. Is it possible this charttype to come from a parent props dynamically and how?

<script>
import { VueCharts } from "vue-chartjs";

export default {
  extends: VueCharts.Line,
  props: ["chartdata", "options"],
  mounted() {
    this.renderChart(this.chartdata, this.options);
  }
}
</script>
<style scoped>

</style>

推荐答案

由于扩展了与mixin相同的功能，因此您需要传递一个动态mixin，为此，您需要两个组件，假设我们有ChartWrapper组件:

since extends the same as mixins, you need to pass a dynamic mixin, in order to do that you need two components, imagine we have component ChartWrapper :

<template>
  <div>
    <div>{{ chartType }}</div>
    <chart :chart-data="datacollection"/>
  </div>
</template>

<script>
import Chart from "./Chart";
import { VueCharts, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
  name: "ChartWrapper",
  components: {
    Chart
  },
  props: {
    chartType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      datacollection: {
        labels: [this.getRandomInt(), this.getRandomInt()],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [this.getRandomInt(), this.getRandomInt()]
          },
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    };
  },
  methods: {
    getRandomInt() {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5;
    }
  },
  created() {
    if (this.chartType) {
      Chart.mixins = [reactiveProp,VueCharts[this.chartType]];
    }
  }
};
</script>

此组件将chartType作为道具，我将所有图表作为VueCharts导入脚本的顶部 ==> 1

this component takes chartType as a prop, and I import all charts as VueCharts in top of the script ==> 1

第二部分:

<script>
export default {
  props: ["options"],
  mounted() {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options);
  }
};
</script>

第二个组件仅具有选项props，并调用了renderChart函数. ==> 2

the second component just has options props, and renderChart function invoked. ==> 2

发生了什么事?

ChartWrapper组件通过chartType道具接收图表类型，在 created 钩子中，如果存在chartType，则将图表(由VueCharts [this.chartType]解析)分配给Chart组件作为混合.除了reactiveProp， 我还将图表数据传递给Chart组件.

the ChartWrapper component receives the chart type by chartType prop, in the created hook, if chartType exist, assign the chart(resolved by VueCharts[this.chartType]) to Chart component as a mixin in addition to reactiveProp, I also pass the chart data to Chart component.

最后，调用ChartWrapper组件:

in the end, call the ChartWrapper component:

<ChartWrapper chartType="Bar"/>

有关代码沙箱的实时示例: https://codesandbox.io/s/vue-template -w9r8k

Live example on code sandbox: https://codesandbox.io/s/vue-template-w9r8k

这篇关于是否可以根据父组件的属性在extends:属性中动态添加图表类型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！