vue-chartjs4 中混合气泡图和折线图
Mixed bubble chart with line chart in 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中创建混合图表?
如您的错误所述,您需要导入并注册 LineController
import {Chart, LineController} from 'chart.js';
Chart.register(LineController);
或者您可以只导入所有内容并让 chart.js 注册它:
import Chart from 'chart.js/auto'
我正在使用 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中创建混合图表?
如您的错误所述,您需要导入并注册 LineController
import {Chart, LineController} from 'chart.js';
Chart.register(LineController);
或者您可以只导入所有内容并让 chart.js 注册它:
import Chart from 'chart.js/auto'