es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El gráfico es demasiado grande. ¿Cómo puedo reducir su tamaño en Vue.js?

13 Jul, 2023 Programación

Tengo incrustado un gráfico de líneas de Chart JS en un proyecto de Vue JS. Sin embargo, mi gráfico es demasiado grande para mi página. ¿Cómo puedo hacer que aparezca pequeño y compacto en mi página web? Esta es la primera vez que estoy agregando gráficos a Vue JS. Cualquier consejo o sugerencia será realmente útil para mí. Gracias.
Aquí está mi código.

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

Cualquier consejo o sugerencia será realmente útil para mí. Gracias.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el gráfico aparezca más pequeño y compacto en tu página web, puedes modificar la propiedad “maintainAspectRatio” en tu objeto “options” a true. Esto hará que el gráfico mantenga su relación de aspecto cuando se redimensione. Además, puedes ajustar la altura y anchura del elemento que contiene el gráfico según tus necesidades. Aquí tienes un ejemplo:

    <template>
  <div class="chart-container">
    <line-chart :chart-data="data" :options="options" :width="400" :height="300"></line-chart>
  </div>
</template>

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  data() {
    return {
      data: {
        // ...
      },
      options: {
        responsive: true,
        maintainAspectRatio: true,
        // ...
      }
    }
  }
}
</script>

<style>
.chart-container {
  width: 400px;
  height: 300px;
}
</style>

    En este ejemplo, hemos establecido la anchura del contenedor del gráfico en 400px y la altura en 300px, y hemos pasado esos valores al componente del gráfico como props. También hemos establecido “maintainAspectRatio” en true en el objeto de opciones, para que el gráfico mantenga su relación de aspecto cuando se redimensione. Puedes ajustar los valores según tus propios requisitos.

Comments are closed.