vue chartjs您可能需要适当的加载程序来处理此文件类型。错误

Question

我有柱状图。带有以下代码的vue文件：

<script>
import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  mounted() {
    this.renderChart(
      {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
          }
        ]
      },
      { responsive: true, maintainAspectRatio: false }
    );
  }
};
</script>

没有

<template>
   <div class="dashboard">
       <BarChart />
   </div>
</template>
<script>
import BarChart from '@/components/Dashboard/BarChart'
export default {
    name:'Dashboard',
    components: {
      BarChart,
    },
    data() {
        return{

        }
    },
}
</script>

但是我得到了这个错误

模块分析失败：意外令牌（6628:12）

您可能需要适当的加载程序来处理此文件类型。

|如果（中间索引1！==起始索引

|大量死亡。推({

| ...数据[中间索引1]，

|x:avgX，

| });




Answer 1

作为我评论的后续，使用vue-chart.js、Vue 2和Vue CLI，在npm每个留档安装vue-chart.js和chart.js后，我试图创建一个示例条形图遇到编译警告。这导致我的图表无法在浏览器中呈现。

警告：在/节点模块/vue图表JS/es/BaseCharts。js

"在chart.js中找不到导出默认值（作为图表导入）"

我做了一些搜索，找到了这个SO帖子，解决了这个问题。

我还注意到“vue chartjs”已经8个月没有更新了，所以现在我建议只使用图表。而是js。减少依赖性。

当我只使用图表时，我最终也遇到了同样的错误。js，但降低了我的npm图表。js版本从3.1开始。1（当前默认值）到2.9。4（我最近用过的）在包装中。json解决了这个问题。

下面是使用Vue 2、Vue CLI和Chart.js构建的示例条形图实现：

父母亲vue

<template>
  <div class="parent">
    <bar-chart :chartData="barChartData" />
  </div>
</template>

<script>
  import BarChart from './BarChart.vue'

  export default {
    components: {
      BarChart
    },
    data() {
      return {
        barChartData: [12, 19, 3, 5, 2, 3],
      }
    }
  }
</script>

BarChart.vue

<template>
  <div class="chart-test">
    <h3>Chart Test</h3>
    <canvas id="chart-canvas" width="500" height="500" ref="chartref"></canvas>
  </div>
</template>

<script>
  import Chart from 'chart.js';
  import { sampleBarConfig } from './chart-configurations.js'

  export default {
    data() {
      return {
        chartObj: null,
        chartConfig: sampleBarConfig
      }
    },
    props: {
      chartData: {
        type: Array,
        required: true
      }
    },
    methods: {
      setChartData() {
        this.chartConfig.data.datasets[0].data = this.chartData;
      }
    },
    mounted() {
      this.setChartData();
      this.chartObj = new Chart(this.$refs.chartref, this.chartConfig);
    },
    // beforeDestroy() {
    //   // This necessary if canvas is reused for a new chart
    //   this.chartObj.destroy();
    // }
  }
</script>

图表配置。js

const sampleBarConfig = {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    // See https://stackoverflow.com/questions/38512001/charts-js-graph-not-scaling-to-canvas-size
    responsive: false,
    //maintainAspectRatio: false
  }
}

export { sampleBarConfig }