Webpack Vue.js Uncaught TypeError:_vueChartjs.Line.extend不是函数

刚刚启动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)

},

我可以在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>

//从vue chartjs包装器导入Line类
从“vue chartjs”导入{Line}
//将其导出以便可以在其他组件中使用
导出默认行。扩展({
数据（）{
返回{
数据收集：{
//要在x轴上表示的数据
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[
{
标签：“数据一”，
背景颜色：“#f87979”，
pointBackgroundColor:'白色'，
边框宽度：1，
pointBorderColor:“#249EBF”，
//要在y轴上表示的数据
数据：[40,20,30,50,90,10,20,40,50,70,90100]
}
]
},
//控制图表外观的Chart.js选项
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
},
网格线：{
显示：真
}
}],
xAxes:[{
网格线：{
显示：假
}
}]
},
图例：{
显示：真
},
回答：是的，
MaintaintAspectRatio:false
}
}
},
挂载（）{
//renderChart函数使用datacollection和options对象呈现图表。
this.renderChart（this.datacollection，this.options）
}
})

---

我是否需要在我的entry js文件的其他地方导入/引用图表库？网页参考资料？Project在没有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)
   }
}

---

有关更多信息，请参阅。

这是我如何在vue.js和laravel项目中添加折线图的。我所做的工作是统计每个月完成的任务，并将它们显示在折线图中

首先，您必须在components目录中为折线图设置组件。保存名为LineChart.js的文件。 此文件夹将包含：

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>

这是查询功能：

 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);
}

---

注意：task complete是一个URL

最后一个例子，在laravel 5.5+Vue2中实现的许多官方和非官方示例代码中对我起了作用，只是为了总结更改：而不是返回

默认导出行。extend（{…}）

您应该

默认导出{extends:Line，}

 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);
}