我正在使用帶有 vue-chartjs4 舊模式的 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
}],
}
這導致; 掛載鉤子中的錯誤：“錯誤：“行”不是注冊的控制器。”。
如何在 chart-vuejs4 中創建混合圖表？
uj5u.com熱心網友回復：
正如您的錯誤所述，您需要匯入并注冊LineController
import {Chart, LineController} from 'chart.js';
Chart.register(LineController);
或者您可以匯入所有內容并讓 chart.js 注冊它：
import Chart from 'chart.js/auto'
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/460834.html
標籤：Vue.js Vuejs2 图表.js Vue组件 vue-chartjs
下一篇：VueJS檔案上傳欄位無法重置