Vue.js 未捕获类型错误：_vueChartjs.Line.extend 不是函数

Posted 2023-02-23

【中文标题】Vue.js 未捕获类型错误：_vueChartjs.Line.extend 不是函数

【英文标题】：Vue.js Uncaught TypeError: _vueChartjs.Line.extend is not a function

【发布时间】：2018-04-15 03:53:21

【问题描述】：

刚刚开始使用 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>

我需要在我的入口 js 文件中的其他地方导入/引用图表库吗？ Webpack 参考资料？没有 chart.vue 文件，项目运行良好。

【参考方案1】：

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。

【讨论】：

最后一个在 laravel 5.5 + vue2 中实现的官方和非官方示例代码中对我有用的示例

只是总结一下变化：而不是返回default export Line.extend( ... )你应该default export extends:Line, ...

【参考方案2】：

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

首先你必须在组件目录中为折线图设置组件。保存名为 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>

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

注意：task-complete 是一个 URL