Можно ли динамически добавлять тип диаграммы в свойство extends: на основе реквизитов из родительского компонента?

Question

У меня есть компонент vue chartjs, который импортирует всю библиотеку vue-chartjs. Моя идея заключается в том, можно ли каким-то образом передать нужный мне тип диаграммы и добавить его в "extends: VueCharts.charttype?". В примере, который я предоставляю, он расширяет VueCharts.Line, мне нужно, чтобы это свойство динамически интерполировалось, передавалось из реквизита. Возможно ли, чтобы этот тип диаграммы динамически исходил от родительского реквизита и как?

<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>

Answer 1

, поскольку расширяется так же, как и миксины, вам нужно передать динамический миксин, для этого вам понадобятся два компонента, представьте, что у нас есть компонент 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

второй компонент:

<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

Что происходит?

компонент ChartWrapper получает тип диаграммы с помощью свойства chartType в создан hook, если chartType существует, назначьте диаграмму (разрешенную VueCharts [this.chartType]) компоненту Chart в качестве миксина в дополнение к реактивному, я также передаю данные диаграммы в компонент Chart.

вВ завершение вызовите компонент ChartWrapper:

<ChartWrapper chartType="Bar"/>

Живой пример в песочнице кода: https://codesandbox.io/s/vue-template-w9r8k