Vue.js未被捕获的TypeError:_vueChartjs.Line.extend不是函数 [英] Vue.js Uncaught TypeError: _vueChartjs.Line.extend is not a function
问题描述
只需启动Vue.js和webpack.我正在尝试将vue-chartjs功能添加到我的项目中.我收到以下错误:
Just starting Vue.js and webpack. I'm trying to add vue-chartjs functionality to my project. I'm receiving the following error:
Uncaught TypeError: _vueChartjs.Line.extend is not a function
at Object.defineProperty.value (..\..\CommodityChart.vue:5)
at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
at fn (bootstrap 7040a42393b737f78245:85)
at Object.<anonymous> (CommodityChart.vue:3)
at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
at fn (bootstrap 7040a42393b737f78245:85)
at Object.defineProperty.value (..\..\fetch-data.vue:36)
at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
at fn (bootstrap 7040a42393b737f78245:85)
at Object.<anonymous> (fetch-data.vue:7)
在我的package.json中
in my package.json
"dependencies": {
"axios": "^0.15.3",
"bootstrap-vue": "^1.0.0-beta.9",
"chart.js": "^2.7.1",
"core-js": "^2.4.1",
"font-awesome": "^4.6.3",
"vue": "^2.1.8",
"vue-chartjs": "^3.0.0",
"vue-router": "^2.1.1",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
我可以在我的node_modules文件夹(chart.js和vue-chartjs)中看到相关性.
I can see the dependencies in my node_modules folder (chart.js and vue-chartjs).
引发错误的.vue文件如下:
my .vue file that is throwing the error looks like:
<script>
//Importing Line class from the vue-chartjs wrapper
import { Line } from 'vue-chartjs'
//Exporting this so it can be used in other components
export default Line.extend({
data () {
return {
datacollection: {
//Data to be represented on x-axis
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: '#249EBF',
//Data to be represented on y-axis
data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
}
]
},
//Chart.js options that controls the appearance of the chart
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [ {
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
//renderChart function renders the chart with the datacollection and options object.
this.renderChart(this.datacollection, this.options)
}
})
</script>
我是否需要在条目js文件中的其他地方导入/引用图表库? Webpack参考?没有chart.vue文件,项目运行正常.
Do i need to import/reference the chart libraries somewhere else in my entry js file? Webpack references? Project is working fine without the chart.vue file.
推荐答案
vue-chartjs的最新版本(3.0.0
)中更改了创建图表组件的语法,因此发生了错误.
Syntax for creating chart component has been changed in the latest version (3.0.0
) of vue-chartjs, hence the error occurred.
根据新语法,应按如下所示创建图表组件:
According to the new syntax, you should create your chart component as follows :
import { Line } from 'vue-chartjs';
export default {
extends: Line,
data() {
return {
datacollection: {
//Data to be represented on x-axis
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [{
label: 'Data One',
backgroundColor: '#f87979',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: '#249EBF',
//Data to be represented on y-axis
data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
}]
},
//Chart.js options that controls the appearance of the chart
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted() {
//renderChart function renders the chart with the datacollection and options object.
this.renderChart(this.datacollection, this.options)
}
}
有关更多信息,请参阅官方文档.
For more info, refer to the official documentation.
这篇关于Vue.js未被捕获的TypeError:_vueChartjs.Line.extend不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!