是否可以根据父组件的 props 在 extends: 属性中动态添加图表类型？答案

【问题标题】：Is it possible to dynamically add chart type in the extends: property, based on props from parent component?是否可以根据父组件的 props 在 extends: 属性中动态添加图表类型？
【发布时间】：2019-06-19 08:38:48
【问题描述】：

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

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

【问题讨论】：

标签： vue.js vue-chartjs

【解决方案1】：

由于扩展与 mixins 相同，您需要传递一个动态 mixin，为此您需要两个组件，假设我们有组件 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作为一个prop，我把所有的图表作为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>

第二个组件只有 options 属性，并且调用了 renderChart 函数。 ==> 2

发生了什么？

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

最后调用 ChartWrapper 组件：

<ChartWrapper chartType="Bar"/>

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

【讨论】：

谢谢哥们！它解决了我的问题！我欠你一杯啤酒！

【解决方案2】：

您还可以选择仅扩展折线图并使用您想要的图表类型更新图表配置并对其进行更新以更改类型的选项。

<script>
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

export default {
  extends: Line,
  name: "LineChart",
  mixins: [reactiveProp],
  props: {
    options: { type: Object },
    chartType: { type: String }
  },
  mounted () {
    this.renderChart(this.chartData, this.options);
  },
  watch: {
    options: {
      deep: true,
      handler () {
        this.$data._chart.options = this.options;
        this.updateChart();
      }
    },

    chartType (newVal) {
      this.$data._chart.config.type = newVal;
      this.updateChart()
    }
  },
  methods: {
    updateChart () {
      this.$data._chart.update();
    },
  }
}
</script>

【讨论】：