来自 Vue-chartjs 的条形图不会呈现

Question

在我的Vue项目中，我无法呈现我使用vueChartjs创建的条形图我试过重新安装vueChartjs并更新我的组件，但都不起作用。我想知道是组件本身的问题，还是我渲染的方式不对？

条形图组件

<script>
import { Bar } from "vue-chartjs";
export default {
extends: Bar,
mounted() {
this.renderChart(
{
labels: [
"London",
"New York",
"New Zeland",
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [
83,
26,
4,
]
}
]
},
{ responsive: true, maintainAspectRatio: false, height: 200 }
);
}
};
</script>

主页组件：

<template>
<v-container class="grey lighten-5">
<v-col cols="12" sm="8">
<v-card class="pa-2" outlined align="center">
<BarChart/>
<div>CHART</div>
</v-card>
</v-col>
</v-container>
</template>
<script>
import BarChart from "@/components/charts/BarChart";
export default {
components: {
BarChart
},
};
</script>
<style></style>

Answer 1

方法中的错误this.renderChart((。我必须查看文档才能弄清楚它的结构。方法this.renderChart((由Bar组件提供，并接受两个参数：两者都是对象。第一个是图表数据，第二个是选项对象。更多文档-https://www.chartjs.org/docs/latest/charts/bar.html

这对我有效：

<script>
import { Bar } from "vue-chartjs";

export default {
extends: Bar,
mounted() {
this.renderChart(
{
labels: [
"London",
"New York",
"New Zeland",
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [
83,
26,
4,
]
}
]
},
{ responsive: true }
);
}
};
</script>