图太大。如何减小 vue js 中图表的大小？

Question

我在 vue js 项目中嵌入了图表 JS 的折线图。但是我的图表对于我的页面来说太大了。我怎样才能使它在我的网页中显得小巧紧凑？这是我第一次向 vue js 添加图表。任何建议或提示都会对我很有帮助。谢谢。这是我的代码。

<script>
import { Line , mixins } from 'vue-chartjs';
import Chart from "chart.js";

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ["options"],
  data: () => ({
      chartdata: {
        labels: ["Oct 2021", "Nov2021", "Nov2021", "Nov2021", "Nov2021","Nov2021","Nov2021","Nov2021"],
        datasets: [
         {
            data: [0, 3.2, 0.2,5.9, 7.9, 6, 5.5, 4.2, 4.2, 3.8,3.8,3.8,2],
            label: "Critical",
            backgroundColor: "rgb(226,135,67)",
            borderColor: "#e28743",
            borderWidth: 3,
          },
           {
            data: [0, 6.3, 0.5, 6, 7.9, 9, 9.8, 10, 11.3, 15],
            label: "High",
            backgroundColor: "rgb(234,182,118)",
            borderColor: "#eab676",
            borderWidth: 3,
          },
          {
            data: [0, 0, 0, 0, 0, 0, 0.1, 0.1, 0, 0],
            label: "Low",
            backgroundColor: "rgb(38, 177, 212)",
            borderColor: "#26b1d4",
            borderWidth: 3,
          },
        ],
     },
    options: {
    responsive: true,
     maintainAspectRatio: false,
    lineTension: 1,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
             padding:20,
          }
        }
      ]
    }
        },
     }),
  mounted() {
    window.dispatchEvent(new Event("resize"));
    this.renderChart(
      this.chartdata,
      this.options,
      // this.textCenter(" Hello world ")
    );
    // this.renderChart(this.chartdata, this.options)
  },
};

</script>

任何建议或提示都会对我很有帮助。谢谢

Answer 1

您需要将该 Vue 组件包装在另一个组件中。在该其他组件中，您可以设置高度并与 div 您的图表组件所在的高度相关。

图太大。如何减小 vue js 中图表的大小？

Chart is too big. How can I reduce size for the chart in vue js?

javascript

resize

linechart

vue.js

chart.js