我正在使用chartjs和vue-chartjs Package 器，并尝试使用从我的api中获取的数据创建一个折线图。数据按预期打印到控制台，并且我在控制台中没有收到错误。生成的折线图在浏览器中根本不显示。但是，在插入canvas标记的地方有大量的白色。我可以很好地创建一个圆环图，只是不是这个折线图。非常感谢您的帮助！我使用的是LineChart组件的https://vue-chartjs.org/examples/中的图表示例代码
IndexView.vue

<script setup>
import axios from 'axios'
import { onMounted, reactive } from 'vue'
import LineChart from '@/components/LineChart.vue'

const data = reactive({
  user: null,
  totals: null,
  checkins: null
})
const state = reactive({
  loading: true
})
const charts = reactive({
  doughnutConfig: null,
  lineConfig: null
})
onMounted(async () => {
  // load data from store and api
  data.user = await userStore.fetchUser()
  const user_resp = await axios.get(...)
  data.totals = user_resp.data.totals
  data.checkins = user_resp.data.check_ins
  state.loading = false

  // create line chart
  var dates = []
  var ratings = []
  var length = data.checkins.length < 10 ? data.checkins.length : 10
  for (var i = 0; i < length; i++) {
    dates.push(data.checkins[i].date)
    ratings.push(data.checkins[i].rating)
  }

  console.log(dates) // [ "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-05T00:00:00" ]
  console.log(ratings) // [ 5, 5, 3, 2, 4 ]

  charts.lineConfig = {
    data: {
      labels: dates,
      datasets: {
        label: 'Ratings by date',
        data: ratings,
        backgroundColor: '#f87979'
      }
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        }
      }
    }
  }
})
</script>
<template>
  <LineChart
    v-if="charts.lineConfig"
    :chart-options="charts.lineConfig.options"
    :chart-data="charts.lineConfig.data"
    :width="400"
    :height="300"
  />
</template>

LineChart.vue

<script setup>
import { defineProps } from 'vue'
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale
)

const props = defineProps({
  chartData: {
    type: Object,
    required: true
  },
  chartOptions: {
    type: Object,
    required: true
  },
  chartId: {
    type: String,
    default: 'line-chart'
  },
  width: {
    type: Number,
    required: true
  },
  height: {
    type: Number,
    required: true
  }
})
</script>

<template>
  <Line
    :chart-id="props.chartId"
    :chart-data="props.chartData"
    :chart-options="props.chartOptions"
    :width="props.width"
    :height="props.height"
  />
</template>