使用Vue组合API访问vue-chartjs 4的renderChart

Question

我想在“图表”组件上设置一些默认选项，以避免在调用我的组件的每个类中追加这些选项。

在vue-chartjs 3中，可以调用renderChart方法并重写图表的当前选项，但我无法使用 vue -chartjs 4和vue 3组合API复制它。

Ex.在vue-chartjs 3

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

Mixins在此版本上不可用。

你知道如何才能做到这一点吗？

这是我使用vue-chartjs 4编写的代码

<template>
  <Doughnut :chartData="chartData" />
</template>

<script lang="ts">

import { ref } from 'vue'
import { Doughnut } from 'vue-chartjs'
import { Chart as ChartJS, registerables, ChartData } from 'chart.js'

ChartJS.register(...registerables);

export default {
  components: { Doughnut },
  setup() {
    const chartData = ref<ChartData>({ datasets: [] });
    const defaultOptions = {
      responsive: true
    }

   // Here I want to append my default options to current options
    
    return { chartData }
  }
}
</script>

我一直在检查文件，但我无法使它正常工作。https://vue-chartjs.org/migration-guides/#new-reactivity-system

Answer 1

如果我理解您的问题正确，您可以将这些选项添加到组件是反应性的中。

<template>
  <Doughnut :chart-data="chartData" :chart-options="chartOptions" />
</template>

如果您想拥有默认选项，可以将其与作为道具传递的自定义选项合并，您可以执行以下操作

export default {
  components: { Doughnut },
  props: {
    customOptions: Object
  },
  setup(props) {
    const chartData = ref<ChartData>({ datasets: [] });
    const defaultOptions = {
      responsive: true
    }

    const chartOptions = computed(() => {
      return {...defaultOptions,...props.customOptions}
      })
    
    return { chartData, chartOptions }
  }
}