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.

La línea del eje x no se extiende por todo el gráfico (gráfico svg).

30 May, 2023 Programación

Tengo un gráfico de barras apiladas en codepen.

Si se fija en el eje x del gráfico, solo está disponible para la mitad del gráfico de barras. Cualquier cambio que haga, la línea no se extiende hasta el final del gráfico de barras.

captura de pantalla

Descripción de la imagen aquí

Este es el código que afecta la línea del eje x del gráfico:



Intenté cambiar el valor x2 a un valor más alto, pero sin efecto.

Hay una cosa más que estoy tratando de lograr. Son las coordenadas x e y para todo el gráfico como tenemos en el ejemplo a continuación.
¿Alguien puede arrojar algo de luz sobre cómo conseguir esto en el gráfico?

enter image description here

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Para extender la línea del eje x del gráfico de barras hasta el final, necesitamos cambiar el valor de x2 para que coincida con el ancho del elemento SVG, que en este caso es 1600. El código debería ser:

    <g class="grid y-grid" id="yGrid">
  <line x1="90" x2="1600" y1="490" y2="490"></line>
</g>

    Para agregar las coordenadas x e y al gráfico, podemos agregar un elemento de texto con las coordenadas deseadas. El código debe agregarse dentro del elemento de grupo chart, así:

    <g class="chart">
  <!-- Agregar coordenadas x e y -->
  <text x="10" y="30" font-family="Arial" font-size="20" fill="#000">x: 0, y: 0</text>
  <!-- Resto del código -->
</g>

    Esto agregará un elemento de texto en la esquina superior izquierda del gráfico de barras, mostrando las coordenadas x e y como x: 0, y: 0. Puede personalizar la familia de fuentes, el tamaño de fuente, el color y la posición del texto como desee.

Comments are closed.