Vue.js 未捕获类型错误:_vueChartjs.Line.extend 不是函数 [英] Vue.js Uncaught TypeError: _vueChartjs.Line.extend is not a function

问题描述

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)

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"

},

I can see the dependencies in my node_modules folder (chart.js and vue-chartjs).

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>

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.

解决方案

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 未捕获类型错误:_vueChartjs.Line.extend 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！