Vuechart 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.