vue-chartjs4中的混合气泡图和折线图

我将vue2与vue-chartjs4传统模式结合使用,我想创建一个混合图表,使用折线图和气泡图组件。

我的MixedChart组件如下所示:

<template>
  <Bubble :chart-data="chartData" :chart-options="options"/>
</template>
<script>
import { Bubble } from 'vue-chartjs/legacy';
import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale)

export default {
  name: 'bubble-chart',
  components: { Bubble },
  props: {
    chartData: {
        type: Object,
        required: true
      },
    options: {
      type: Object,
      default: () => {}
    }
  }
};
</script>

我的数据如下:

{
    labels: ['', ' ', ''],
    datasets: [{
      type: 'bubble',
      label: 'bubble',
      backgroundColor: config.colors.info,
      borderColor: config.colors.info,
      data: [{
        x: ' ', // use middle label
        y: 20,
        r: 8
      }],
      order: 3
    }, {
      type: 'line',
      label: 'test',
      borderColor: config.colors.danger,
      data: [20, 20, 20],
      fill: false,
      pointRadius: 0,
      order: 1
    }, {
      type: 'line',
      label: 'test1',
      borderColor: config.colors.warning,
      data: [30, 30, 30],
      fill: false,
      pointRadius: 0,
      order: 1,
      hidden: true
    }, {
      type: 'line',
      label: 'test2',
      borderColor: config.colors.primary,
      data: [40, 40, 40],
      fill: false,
      pointRadius: 0,
      order: 2
    }],
  }

这导致了;挂载钩子中出错:“错误:“line”不是注册的控制器。”。

如何在chart-vuejs4中创建混合图表?