Question

我正在尝试使用nuxt上的库制作图

我希望使用图表制作工具，但暂时无法使用。

链接图表管理员：https://gionkunz.github.io/chartist-js/getting-started.html

我正在按照入门部分尝试显示图表。

在我的组件中，我正在这样做：

<template>
  <canvas class="ct-chart ct-perfect-fourth" />
</template>

export default {
  created() {
    this.creatChart();
  },
  methods: {
    creatChart() {
      const data = {
        // A labels array that can contain any sort of values
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        // Our series array that contains series objects or in this case series data arrays
        series: [
          [5, 2, 4, 2, 0]
        ]
      }
      const chart = new Chartist.Line('.ct-chart', data);
      return chart;
    },
  },
}

我收到此错误：无法读取null的属性'querySelectorAll'

当然，图表专家安装了npm ...

Answer 1

您必须使用created() {}方法来仅在客户端上初始化图表，而不是mounted() {}来初始化您的Chartist。

mounted() {
  this.creatChart();
},

“创建的”钩子将在服务器端运行两次，然后在客户端运行一次。 “已挂载”将仅在客户端运行一次。

由于使用了document.querySelectorAll，Chartist仅在客户端（浏览器）上可用。

但是在服务器端（Node.js）上，document不存在...这解释了您的Cannot read property 'querySelectorAll' of null错误。

错误：无法读取null的属性'querySelectorAll'

1 个答案: