vue-chartjs 你可能需要一个合适的加载器来处理这个文件类型。错误

Question

我有带有代码的 BarChart.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></template>。我想在 Dashboard.vue 中显示这个条形图

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

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

| if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {

|抽取.push({

| ...数据[intermediateIndex1],

| x: avgX,

| });

Answer 1

作为对我的评论的跟进，并使用 vue-chart.js、Vue 2 和 Vue CLI，在 npm 根据文档安装“vue-chart.js”和“chart.js”之后，我尝试创建一个示例条形图并遇到编译警告。这导致我的图表无法在浏览器中呈现。

警告：在 ./node_modules/vue-chartjs/es/BaseCharts.js

“在“chart.js”中找不到导出“默认”（导入为“图表”）

我做了一些搜索，发现这个SO posting 解决了这个问题。

我还注意到 'vue-chartjs' 已经有 8 个月没有更新了，所以在这一点上，我建议只使用 Chart.js。更少的依赖。

我最终在仅使用 Chart.js 时遇到了同样的错误，但是在 package.json 中将我的 npm chart.js 版本从 3.1.1（当前默认）降级到 2.9.4（我最近使用过）解决了问题。

这是使用 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>

条形图.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>

chart-configurations.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 }