1

我正在尝试使用vue-chartjs 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 警告]：挂载钩子错误：“TypeError：__WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Line.renderChart不是函数”

4

1 回答 1

2

该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文件中，因为无需指定模板，因为它已包含在Line要导入的组件中，并且样式主要在图表的选项中完成。

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

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

<script>
import MyChart from './MyChart'

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

请参阅文档。

于 2017-07-07T15:15:31.180 回答