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.

  • es.davy.ai/
  • Programación /
  • Cómo modificar y hacer que el ancho de las etiquetas de la caja sea fijo sin cambios en Chart.js.

Cómo modificar y hacer que el ancho de las etiquetas de la caja sea fijo sin cambios en Chart.js.

02 Jun, 2023 Programación

Tengo 2 Doughnut que necesitan ser alineados uno encima del otro, como se puede ver en la imagen a continuación:
introduzca aquí la descripción de la imagen

Los Doughnuts no están alineados como se puede ver porque la longitud de las etiquetas no es igual.

He probado con muchos plugins.legend.labels pero no pude hacer que el ancho de las etiquetas del la leyenda se fije para que la doughnut no se mueva en función de la longitud de las etiquetas.

Mi código

export const DEFAULT_DOUGHNUT_OPTIONS = {
maintainAspectRatio: false,
aspectRatio: 1,
resizeDelay: 1000,
// desactivar la animación
animation: {
duration: 0, // tiempo general de animación
},
plugins: {
legend: {
labels: {
generateLabels: (chart: any) => {
const { data } = chart;
return generateLabels(data);
},
color: darkMainTextColor,
font: {
size: 14,
family: fontFamily,
},
usePointStyle: true,
boxWidth: 160,
padding: 10,
},
position: ‘right’,
rtl: true,
maxWidth: 160,
},
},
borderWidth: 1,
cutout: ‘80%’,
};

He intentado ajustar boxWidth, maxWidth y más … pero no ha ayudado. Por favor, ayuda 🙂

Gracias a los ayudantes.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear los dos Doughnuts, puede intentar los siguientes pasos:

    1. Agregue un contenedor padre común para los dos Doughnuts y establezca su propiedad de visualización en flex.

    2. Establezca la propiedad de flex para los dos Doughnuts en 1, para que ocupen un ancho igual.

    3. Establezca la propiedad de flex para el contenedor de leyenda en 0, para que no ocupe espacio adicional.

    4. Para la etiqueta de leyenda, puede establecer un ancho fijo y truncar el texto de la etiqueta con una elipsis. Esto garantizará que todas las etiquetas tengan el mismo ancho y no afecten la alineación de los Doughnuts.

    Aquí hay un ejemplo de fragmento de código:

    <div style="display: flex; flex-direction: column;">
  <div style="flex: 1;">
    <canvas id="doughnut1"></canvas>
  </div>
  <div style="flex: 1;">
    <canvas id="doughnut2"></canvas>
  </div>
  <div style="flex: 0;">
    <div id="legend-container" style="width: 160px;">
      <!-- etiquetas de leyenda con ancho fijo -->
      <div style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Etiqueta 1</div>
      <div style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Etiqueta 2</div>
      <div style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Etiqueta 3</div>
    </div>
  </div>
</div>

    En su código existente, puede agregar este div envolvente y ajustar los estilos CSS en consecuencia. Además, asegúrese de agregar los atributos de ID a los elementos canvas de Doughnut e inicializar las instancias de gráfico para cada uno de ellos.

    ¡Espero que esto ayude!

Comments are closed.