Vue Chart js 不在组件上呈现

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 warn]: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Line.renderChart is not a function"

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.

Vue Chart js 不在组件上呈现

Vuechart js not rendering on a component

chart.js

vuejs2

vue-chartjs