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

Question

我正在使用 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中创建混合图表？

Answer 1

如您的错误所述，您需要导入并注册 LineController

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

Chart.register(LineController);

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

import Chart from 'chart.js/auto'

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

Mixed bubble chart with line chart in vue-chartjs4

vue.js

vuejs2

chart.js

vue-component

vue-chartjs