Vue.js Uncaught TypeError: _vueChartjs.Line.extend is not a function
Vue.js Uncaught TypeError: _vueChartjs.Line.extend is not a function
刚开始 Vue.js 和 webpack。我正在尝试将 vue-chartjs 功能添加到我的项目中。我收到以下错误:
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
"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)。
我抛出错误的 .vue 文件如下所示:
<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>
我是否需要 import/reference 入口 js 文件中其他地方的图表库? Webpack 参考资料?项目在没有 chart.vue 文件的情况下工作正常。
vue-chartjs最新版本(3.0.0
)修改了创建图表组件的语法,因此出现错误。
根据新语法,您应该按如下方式创建图表组件:
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)
}
}
有关详细信息,请参阅 official documentation。
这就是我在 vue.js 和 laravel project.The 中添加折线图的方式 我所做的工作是计算每个月的完成任务并在折线图中显示图。
首先,您必须在名为 LineChart.js 的组件 directory.Save 中为折线图设置组件。
此文件夹将包含:
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
然后你必须将代码写入你的vue文件。
<div class="display">
<line-chart :chart-data="datacollection"></line-chart>
mounted() {
this.LoadCompleteTaskbyMonth();
}
data() {
return {
months: null,
month_data: null,
datacollection: null
}
}
methods:{
LoadCompleteTaskbyMonth()
{
this.$Helpers.Get('task-complete', {},this.$store.state.token)
.then((response) => {
this.months = response.map(a => a.month);
this.month_data = response.map(a => a.value);
this.datacollection = {
labels:this.months,
datasets: [
{
label: 'Completed Task',
data:this.month_data
}
]
}
})
}
}
这是查询函数:
public function completeTask()
{
$data = array();
$data = DB::table('tasks')
->select(
DB::raw("DATE_FORMAT(tasks.created_at,'%Y-%m') AS month2"),
DB::raw("DATE_FORMAT(tasks.created_at,'%Y-%M') AS month"),
DB::raw('count(*) AS value')
)
->groupBy('month','month2')
->orderBy('month2','ASC')
->where('task_status_id', '=', 5)
->get();
return response()->json($data);
}
注意:任务完成是 URL
刚开始 Vue.js 和 webpack。我正在尝试将 vue-chartjs 功能添加到我的项目中。我收到以下错误:
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
"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)。
我抛出错误的 .vue 文件如下所示:
<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>
我是否需要 import/reference 入口 js 文件中其他地方的图表库? Webpack 参考资料?项目在没有 chart.vue 文件的情况下工作正常。
vue-chartjs最新版本(3.0.0
)修改了创建图表组件的语法,因此出现错误。
根据新语法,您应该按如下方式创建图表组件:
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)
}
}
有关详细信息,请参阅 official documentation。
这就是我在 vue.js 和 laravel project.The 中添加折线图的方式 我所做的工作是计算每个月的完成任务并在折线图中显示图。
首先,您必须在名为 LineChart.js 的组件 directory.Save 中为折线图设置组件。 此文件夹将包含:
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
然后你必须将代码写入你的vue文件。
<div class="display">
<line-chart :chart-data="datacollection"></line-chart>
mounted() {
this.LoadCompleteTaskbyMonth();
}
data() {
return {
months: null,
month_data: null,
datacollection: null
}
}
methods:{
LoadCompleteTaskbyMonth()
{
this.$Helpers.Get('task-complete', {},this.$store.state.token)
.then((response) => {
this.months = response.map(a => a.month);
this.month_data = response.map(a => a.value);
this.datacollection = {
labels:this.months,
datasets: [
{
label: 'Completed Task',
data:this.month_data
}
]
}
})
}
}
这是查询函数:
public function completeTask()
{
$data = array();
$data = DB::table('tasks')
->select(
DB::raw("DATE_FORMAT(tasks.created_at,'%Y-%m') AS month2"),
DB::raw("DATE_FORMAT(tasks.created_at,'%Y-%M') AS month"),
DB::raw('count(*) AS value')
)
->groupBy('month','month2')
->orderBy('month2','ASC')
->where('task_status_id', '=', 5)
->get();
return response()->json($data);
}
注意:任务完成是 URL