vue-chartjs无法呈现线状图
vue-chartjs无法呈现线状图
提问于 2021-05-07 06:30:55
MyChart.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>LineChart.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我甚至将属性从:chartData更改为:chartData，但其错误相同。我正在使用他们的文档中的示例代码，我在这里做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-05-07 06:57:43
首先，将您的chart.js版本更新为2。您可以通过执行以下命令来做到这一点。
npm install chart.js@2将图表选项与数据一起发送。就像这样。
<template>
<v-container>
<v-card elevation="2">
<v-card-title>AQI Comparison</v-card-title>
<line-chart
:chart-data="datacollection"
:options="chartOptions"
></line-chart>
</v-card>
</v-container>
</template>并将图表选项数据与datacollection变量一起添加到脚本中。就像这样。
<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,
},
],
},
chartOptions: {
responsive: true,
legend: {
display: false,
},
tooltips: {
titleFontSize: 20,
bodyFontSize: 25,
},
scales: {
xAxes: [],
yAxes: [
{
ticks: {
beginAtZero: false,
},
},
],
},
},
};
},
};
</script>Stack Overflow用户
发布于 2021-05-07 07:08:48
从错误来看，我认为在vue-chartjs和chart.js之间是一个不兼容的问题。
vue-chartjs自2020年12月以来就没有更新过。
你能试着把chart.js降到2.9.4吗？我认为它将解决构造函数问题。
"chart.js": "2.9.4",
"vue-chartjs": "3.5.1",我在codesandbox中创建了一个很小的示例，它使用您提供的代码。
https://codesandbox.io/s/distracted-galileo-r3lec?file=/package.json:378-401
附注：
如果您想拥有一个更新图表库，您可以查看顶级图表https://github.com/apexcharts/vue-apexcharts。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67430001
复制相关文章
相似问题
腾讯云开发者
