Question

我正在尝试使用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不是函数”

Answer 1

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>

See the documentation.

Vuechart js无法在组件上呈现

1 个答案: