Chart.js Vuechart js未在组件上渲染

我正在尝试使用npm包，但下面的代码没有呈现图表。我正在使用VueJS 2，并且已经使用

npm

安装了该软件包

<canvas id="chartRecord" width="100%" height="400"></canvas>

<script>
  import { Line } from 'vue-chartjs'
  export default {
    mounted () {
      Line.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>

从“vue chartjs”导入{Line}
导出默认值{
挂载（）{
Line.renderChart({
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[{
标签：“GitHub提交”，
背景颜色：“#f87979”，
数据：[40,20,12,39,10,40,39,80,40,20,12,11]
}]
})
}
}

我得到了这个错误：

[Vue warn]：挂载的钩子中出现错误：“TypeError:

\uu网页包\u导入的\u模块\u 0\u Vue\u chartjs\uuuu.Line.renderChart

不是函数”

---

vue chartjs

模块提供了用于扩展以自定义的vue组件

执行您尝试执行的操作的正确语法：

// MyChart.js
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]
        }
      ]
    })
  }
}

请注意，您可以简单地将其放在

.js

文件中，因为无需指定模板，因为它已经包含在导入的

行

组件中，而且样式设置主要在图表的选项中完成

然后，您可以像导入任何其他组件一样导入扩展组件：

//Parent.vue
<template>
  <my-chart></my-chart>
</template>

<script>
import MyChart from './MyChart'

export default {
  components: { MyChart }
}
</script>

//Parent.vue
从“/MyChart”导入MyChart
导出默认值{
组件：{MyChart}
}

---

你能稍微解释一下吗？我应该把剧本放在哪里？以及如何在我的组件中访问它。感谢更新了我的回答并尝试了它，并在js文件夹中添加了

Chartrecord.js

。我的组件在组件文件夹中，但没有运气。你说“没有运气”是什么意思？您是否收到错误？是的，它显示

找不到模块

预期的意外令牌，（17:0）`