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 colocar la leyenda en la parte inferior del gráfico antes de cargar los datos en el gráfico de Apex utilizando Blazor?

Cómo colocar la leyenda en la parte inferior del gráfico antes de cargar los datos en el gráfico de Apex utilizando Blazor?

27 Jul, 2023 Programación

He creado un componente de gráfico simple con Apex utilizando Blazor. Aquí está mi código del componente.

<apexchart @ref="_detailsChart" titem="SalesByLocationResponse" title="Valor Bruto de Orden" debug="">

          <apexpointseries titem="SalesByLocationResponse" items="salesBylocation" name="Stocks" seriestype="SeriesType.Donut" xvalue="@(e => e.Location.CodeName)" yvalue="@(e => e.TotalSalesAmt)" orderbydescending="e=>e.X"></apexpointseries>

</apexchart>

Pero siempre la leyenda se ha ubicado en el lateral derecho del gráfico de donut, como se muestra en esta imagen: enlace a la imagen.

Ahora necesito colocar la leyenda en la parte inferior. ¿Cómo puedo hacer esto?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mover la leyenda al fondo del gráfico donut en el componente ApexChart utilizando Blazor, puedes agregar el componente Legend dentro del componente ApexChart y establecer su propiedad Position en “Bottom”. Aquí tienes un ejemplo de fragmento de código:

    <apexchart @ref="_detailsChart" titem="SalesByLocationResponse" title="Valor Bruto del Pedido" debug="">

  <apexpointseries titem="SalesByLocationResponse" items="salesBylocation" name="Stocks" seriestype="SeriesType.Donut" xvalue="@(e => e.Location.CodeName)" yvalue="@(e => e.TotalSalesAmt)" orderbydescending="e => e.X"></apexpointseries>

  <apexlegend position="Position.Bottom"></apexlegend>

</apexchart>

    Con este código, la leyenda se ubicará debajo del gráfico donut. Puedes ajustar la posición de la leyenda cambiando la propiedad Position a cualquiera de los siguientes valores:

    • Top (arriba)
    • Bottom (abajo)
    • Left (izquierda)
    • Right (derecha)
    • Floating (flotante) (valor predeterminado)

    Ten en cuenta que el valor Position.Bottom también se puede escribir como @(Position.Bottom) para evitar errores.

Comments are closed.