Creación del SVG del gráfico

Clase 12 de 21 • Curso Práctico de Vue.js

Clase anteriorSiguiente clase

Miguel Angel Reyes Moreno

student•

Dejen su like para pedir un curso de creación de SVG

Guillermo Castaño Vèlez

student•

Lástima que en Platzi no se tenga un curso de SVg completo

Rafael Soriano Ramírez

student•

A mi experiencia ya hay alternativas de librerías que hacen esto, es bueno entender las entrañas, pero no es tan práctico en un desarrollo de cero

Ana Shek

student•

viewBox Los dos primeros valores indican las coordenadas iniciales del rectángulo en "x" y en "y" Los últimos dos valores indican el ancho y la altura del rectángulo en px

<svg viewBox="0 0 300 200">

line Representa el eje donde va a pasar el 0

stroke: color de la línea
stroke-width: ancho de la línea en px
x1: coordenada inicial de la línea en el eje "x"
y1: coordenada inicial de la línea en el eje "y"
x2: coordenada final de la línea en el eje "x"
y2: coordenada final de la línea en el eje "y"

Este código formará una línea horizontal desde la coordenada (0, 100) hasta la coordenada (300, 100)
<line
	stroke="#c4c4c4"
	stroke-width="2"
	x1="0"
	y1="100"
	x2="300"
	y2="100"
/>

Este código creará una línea vertical desde la coordenada (200, 0) hasta la coordenada (200, 200)
<line
	stroke="#04b500"
	stroke-width="2"
	x1="200"
	y1="0"
	x2="200"
	y2="200"
            />

polyline UIna secuencia de líneas conectadas (puede ser un polígono cerrado, una circunferencia, etc.)

fill: indica el relleno del polígono
stroke: color de la línea
stroke-width: ancho de la línea en px
points: recibe una lista de coordenadas "x,y"

<polyline
	fill="none"
	stroke="#0689B0"
	stroke-width="2"
	points="0,0 100,100 200,100 300,200"
 />

Josue Cerron Tuesta

student•

Wow esto vale oro!

Santiago Gonzalez

student•

Componente Graphic

<template>
  <div>
    <svg
      viewBox="0 0 300 200">
        <line
          stroke="#c4c4c4" 
          stroke-width="2"
          x1="0"
          y1="100"
          x2="300"
          y2="100"/>
          <polyline 
            fill="none"
            stroke="#0689B0"
            stroke-witdh="2"
            points="0,0 100,100 200,100 300,200"/>
          <line
            stroke="#04b500"
            stroke-witdh="2"
            x1="200"
            y1="0"
            x2="200"
            y2="200"/>
      </svg>
    <p>Ultimos 30 días</p>
  </div>
</template>

<style scoped>
svg {
  width: 100%;
}

p {
  text-align: center;
}
</style>

Matías Daniel Cravero

student•

Muy bueno, no tenía ni idea que se podía graficar sobre html nativo!

Cristian Diaz

student•

Técnicamente no es HTML, es su propia cosa, ya que un svg puede existir fuera del HTML

Detalles técnicos aparte, si, los SVG son una herramienta muy poderosa

Ameth Ordoñez Erazo

student•

<style scoped>
svg {
  width: 100%;
}

p {
  text-align: center;
}
</style>

Hans González

student•

Gracias brother

Jose Morales Varon

student•

Estos gráficos son bastante interesantes, me gustaría que tuvieran más contenido.

Rafael Soriano Ramírez

student•

En un proyecto profesional ¿Qué alternativas para crear gráficos de éste tipo se tienen compatibles con Vue 3?

Diana Martinez

student•

Todas las que soporte la web, el team de Vue siempre tiene muy en el core, que Vue extiende las características nativas de HTML, CSS y JS, nunca reinventa esas cosas, y siempre te permite aprovecharlas al 100%. Así que cualquier cosa que puedas usar en las tecnologías vanilla, deberías poder usarlas fácilmente con Vue.

John Jairo Caranton Ruiz

student•

Para este tipo de graficos canvas no seria mejor ?

Diana Martinez

student•

No necesariamente, este ejemplo solo es didáctico, podrías usar cualquiera de los dos.

Carlos Rodríguez

student•

Espectacular, no conocía esta herramienta de svg para html!

Rafael Soriano Ramírez

student•

es un amor conocer esta herramienta, es bueno conocer sus entrañas, aunque en proyectos profesionales ya hay cosas que hacen esto

Ricardo Portillo

student•

Los que desean profundizar aquí dejo el Enlace para la documentación del svg

Julian David Alzate Cuervo

student•

Para estudiar un poco más de SVG

https://www.w3schools.com/graphics/svg_intro.asp

Diana Martinez

student•

Hola, sin duda el componente del gráfico es el más interesante pero también el más complicado del curso, si sienten que es demasiado para ustedes, no hay ningún problema en saltarse hasta las clases del próximo componente si es necesario.

Recuerden que siempre pueden tomar el código del repositorio del curso si es necesarario.

Anderson Eduardo Arévalo Ramírez

student•

La profe explica muy bien, no es tan complejo si sabes un poco de manejo de datos.Yo vi mas de 20 materias compuestas por matematica y no hay nada más bonito que ver esto<3

Juan Guillermo Perez Cardozo

student•

oooo pero que bien, no sabia nada de svg. aqui aprendi como hacer un grafico basico y estatico

Jahiker Rojas

student•

Que cool! nunca habia creado un svg! estuvo divertido jajaja 😁

Felix Torres Javier Antonio

student•

Maravilloso SVG!!

<template>
  <div>
    <svg
      viewBox="0 0 300 200">
        <line
          stroke="#c4c4c4" 
          stroke-width="2"
          x1="0"
          y1="100"
          x2="300"
          y2="100"/>
          <polyline 
            fill="none"
            stroke="#0689B0"
            stroke-witdh="2"
            points="0,0 100,100 200,100 300,200"/>
          <line
            stroke="#04b500"
            stroke-witdh="2"
            x1="200"
            y1="0"
            x2="200"
            y2="200"/>
      </svg>
    <p>Ultimos 30 días</p>
  </div>
</template>

<style scoped>
svg {
  width: 100%;
}

p {
  text-align: center;
}
</style>

Creación del SVG del gráfico

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?