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

Posted 2023-05-07

【中文标题】图表太大。如何减小 vue js 中图表的大小？

【英文标题】：Chart is too big. How can I reduce size for the chart in vue js?

【发布时间】：2022-01-11 12:43:28

【问题描述】：

我在 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>

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

【参考方案1】：

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