webpack - Vue.js 未捕获 TypeError : _vueChartjs. Line.extend 不是函数

Question

刚刚启动 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 文件的情况下运行良好。

Answer 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 .