我的图表.vue
<template>
<v-container>
<v-card elevation="2">
<v-card-title>AQI Comparison</v-card-title>
<line-chart :chart-data="datacollection"></line-chart>
</v-card>
</v-container>
</template>
<script>
import LineChart from "./LineChart.js";
export default {
name: "AQIChartComponent",
components: {
LineChart
},
data() {
return {
datacollection: {
labels: [
"week 1",
"week 2",
"week 3",
"week 4",
"week 5",
"week 6",
"week 7",
"week 8",
"week 9",
"week 10",
],
datasets: [
{
data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false,
},
{
data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false,
},
{
data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
label: "Europe",
borderColor: "#3cba9f",
fill: false,
},
{
data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false,
},
{
data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
label: "North America",
borderColor: "#c45850",
fill: false,
},
],
}
};
}
};
</script>
折线图.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
我收到以下错误:
[Vue warn]: Error in mounted hook: "TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor"
found in
---> <LineChart>
<VCard>
<AQIChartComponent> at src/components/AQIChartComponent.vue
<AQIComponent> at src/components/AQIComponent.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
我什至将属性从 :chart-data 更改为 :chartData 但它仍然是相同的错误。 我正在使用他们的示例代码 documentation ,我在这里做错了什么?
最佳答案
从报错来看,我认为是vue-chartjs和chart.js不兼容的问题
自 2020 年 12 月以来,vue-chartjs 没有更新。
您可以尝试将 chart.js 降级到 2.9.4 吗?我认为它将解决构造函数问题。
"chart.js": "2.9.4",
"vue-chartjs": "3.5.1",
我在 codesandbox FYR 中使用您提供的代码创建了一个小示例。
https://codesandbox.io/s/distracted-galileo-r3lec?file=/package.json:378-401
附言
如果您想更新图表库,可以查看 apex 图表 https://github.com/apexcharts/vue-apexcharts
关于javascript - vue-chartjs 无法渲染折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67430001/