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

Question

我使用的是带有vue-chartj4遗留模式的vue2，我想要创建一个混合图表，它使用了线条图和气泡图组件。

我的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
    }],
  }

这将导致挂载钩子中的错误：" Error："line“不是已注册的控制器。”

如何在图表-vuejs4 4中创建混合图表？

Answer 1

由于您的错误状态，需要导入和注册LineController

import {Chart, LineController} from 'chart.js';

Chart.register(LineController);

或者您只需导入所有内容并让chart.js注册它：

import Chart from 'chart.js/auto'