Vue-Chart-3 未显示在网页上答案

【问题标题】：Vue-Chart-3 is not displaying on a WebpageVue-Chart-3 未显示在网页上
【发布时间】：2023-02-21 21:42:02
【问题描述】：

我使用 Vue-chart-3 添加了折线图，但该图表未显示在网页上。我上次使用 chart.js 添加了图表。它工作得很好。现在它不支持 vue 3，所以我必须选择 vue-chart-3。我运行时没有显示任何错误，图表也占用了空间，但没有显示出来。我真的不明白可能是什么问题。

chart.vue

<template>
    <LineChart :charData="testData" />
</template>
<script lang="ts">
import { LineChart } from "vue-chart-3";
import { Chart, LineController, ArcElement, Tooltip } from "chart.js";
Chart.register(LineController, ArcElement, Tooltip);
Chart.register(LineController, ArcElement, Tooltip);

export default {
  components: { LineChart },

  setup() {
    const testData = {
        labels: ["Oct 2021", "Nov2021", "Nov2021", "Nov2021", "Nov2021","Nov2021","Nov2021","Nov2021"],
        datasets: [
         {
            data: [0, 3.2, 0.2,5.9, 4.9, 5.5, 3.2, 4.2, 0,3.8,3.8,2],
            label: "Critical",
            backgroundColor: "rgb(226,135,67)",
            borderColor: ["#e28743"],
            borderWidth: 3,
            tension: 0.5,
          },
           {
            data: [0, 6.3, 0.5, 6, 7.9, 9, 5, 4, 11.3, 7],
            label: "High",
            backgroundColor: "rgb(245, 184, 54)",
            borderColor: ["#f5b836"],
            borderWidth: 3,
            tension: 0.5,
          },
          {
            label: "Medium",
            backgroundColor: "rgb(234,182,118)",
            borderColor: ["#eab676"],
            borderWidth: 3,
            tension: 0.5,
          },
          {
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            label: "Low",
            backgroundColor: "rgb(38, 177, 212)",
            borderColor: ["#26b1d4"],
            borderWidth: 3,
            tension: 0.5,
          },
           {
            label: "Functional",
            backgroundColor: "rgb(163, 255, 250)",
            borderColor: ["#a3fffa"],
            borderWidth: 3,
            tension: 0.5,
          },
        ],
     }
      return { testData };
  }
}

</script>

Tab.vue

<template>
    <div class="chart">
        <h4>Vulnerabilities Over Time</h4>
        <PerformanceChart class="chart-container"> </PerformanceChart>
        </div>
</template>
<script>
import  PerformanceChart from "./PerformanceChart.vue";

export default {
    components:{
        PerformanceChart,
    },
};
</script>
<style>
.chart-container canvas{
    height:400px !important;
    position: relative !important;
    text-align: center;
}
.chart{
    text-align: center;
}
</style>

谢谢

【问题讨论】：

标签： javascript vue.js vuetify.js vue-chartjs

【解决方案1】：

你在模板中的 chartData 中错过了 chart.vue

【讨论】：