我无法在页面上显示 vue-chart.js

Question

我正在尝试学习如何使用 vue-chart.js 和 Chart.js 。 问题是在 Main page.vue 上不显示图表本身

这是来自 ../src/Chart/RandomChart.vue 的代码

<template>
    <div>               
        <random-chart></random-chart>
    </div>
</template>

<script>
import RandomChart from '../Chart/RandomChart.vue'
export default{
    components:{
        RandomChart
    }

}
</script>

这是来自 ..src/Chart/LineChart.js 的代码

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData создаётся внутри миксина.
    // Если вы хотите передать опции, создайте локальный объект options
    this.renderChart(this.chartData, this.options)
  }
}

这是来自 RandomChart.vue 的代码，虽然它也在官方文档中

<template>
  <div class="small">
    <line-chart :chart-data="datacollection"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
  import LineChart from './LineChart.js'

  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      fillData () {
        this.datacollection = {
          labels: [this.getRandomInt(), this.getRandomInt()],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }, {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    }
  }
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

嗯，来自 App.vue 的代码

<template>
    <div class="app">
        <router-view></router-view>
    </div>
</template>

<script>
    export default{
        
    }
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
</style>

和 main.js

import { createApp } from 'vue'
import App from './App'
import router from "@/router/router";



const app = createApp(App)

app
    .use(router)
    .mount('#app');

和json

  "dependencies": {
    "chart.js": "^2.9.4",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-chart-3": "^0.5.8",
    "vue-chartjs": "^3.5.1",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.0-0"
  },

坐了半天不明白是什么问题，可能是我没看到的愚蠢错误。

Answer 1

vue-chartjs 与 chart.js v3（最新版本）不兼容，因此您需要将 chart.js 降级到 2.9.4 版才能使其工作，或者您需要使用不带 vue 包装器的 chart.js 准系统：

npm uninstall chart.js
npm install chart.js@2.9.4