Question

我想在vue项目中使用图表。现在，我将Vue与TypeScript，Vue-property-decorator和vue-chartjs结合使用。我找到了可以同时使用两者的页面（https://www.npmjs.com/package/vue-chartjs-typescript）。现在，我只是尝试实现Barchart。

我想将图表脚本存储在单独的组件（Dashboard_BarChart.vue）中。代码看起来像这样：

<script lang="ts">
//import Vue from "vue";
import { Vue, Component } from "vue-property-decorator";
import { Bar } from "vue-chartjs";

Component({
    extends: Bar
});
export default class BarChart extends Vue<Bar> {
    mounted() {
        // Overwriting base render method with actual data.
        this.renderChart({
            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            datasets: [
                {
                    label: "GitHub Commits",
                    backgroundColor: "#f87979",
                    data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
                }
            ]
        });
    }
}
</script>

在我的Dahsboard.vue（我要实现该组件的地方）中，我编写了以下代码：

<template>
    <q-page class="flex flex-center standardBackgroundDark">
        <h1>Dashboard</h1>
        <div>
            <BarChart></BarChart>
        </div>
    </q-page>
</template>

<script lang="ts">
//import Vue from "vue";
import BarChart from "../../components/Dashboard_BarChart.vue";
import { Vue, Component } from "vue-property-decorator";

@Component({
    components: { BarChart }
})
export default class CommitChart extends Vue {}
</script>

<style scoped>
</style>

因此，如果我以这种方式实现该组件，则会收到以下错误消息： Error Message

我希望有人能帮助我。

@Component({
    components: { BarChart }
})

在vue-property-decorator中使用Vue-chartjs将图表实现为组件的错误消息

0 个答案: