Question

如何在vue和vuetify中将Charts.js与图表一起使用？我尝试了所有方法。谁能一步一步帮助我？

vue version = 2.6.10
chart.js version = 2.9.3
vue-chartjs = 3.5.0

<template>
    <canvas id="chartRecord" width="100%" height="400"></canvas>
</template>
<script>
    import {Line} from 'vue-chartjs';

    export default Line.extend({
        mounted() {
            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]
                    }
                ]
            })
        }
    })

这是我要显示图表的地方 Dashboard.vue

<v-card>
            <v-layout wrap>
                <v-flex xs12 md12>
                    <my-chart></my-chart>
                </v-flex>
            </v-layout>
        </v-card>

    <script>
        import MyChart from './../components/Charts/Chart.vue'

        export default {
            components: {
                'my-chart' : MyChart
            }
        }


</script>

但我在控制台中收到此错误 TypeError：vue_chartjs__WEBPACK_IMPORTED_MODULE_0 __。Line.extend不是函数 Firefox无法在ws：// localhost：8080 / sockjs-node / 183 / ub2b43v5 / websocket建立与服务器的连接。页面加载时，与ws：// localhost：8080 / sockjs-node / 183 / ub2b43v5 / websocket的连接中断。

Answer 1

您的实现存在两个问题。 npm page of vue-chartjs上的文档将有助于清除此问题。

例如，vue-chartjs仅在.js文件中起作用，或者如果您要使用SFC，则应排除模板标记，因为vuejs无法合并模板和混合（由{{1 }}）已经有一个模板。

所以您的实现应如下所示，

MyChart.vue -请记住，此文件不应带有vue-chartjs标签。

<template>

App.vue

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

export default {
  extends: Bar,
  mounted() {
    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>

我为此创建了一个codeandbox，您可以找到实现here

vue中Charts.js出现问题。任何人都可以逐步帮助

1 个答案: