Creación del SVG del gráfico
Contenido del curso
Setup inicial
Vista
Gráfico
Modelo
Cierre
Creación del SVG del gráfico
Contenido del curso
Creación del SVG del gráfico
Miguel Angel Reyes Moreno
Estudiante
Guillermo Castaño Vèlez
Estudiante
Rafael Soriano Ramírez
Estudiante
Ana Shek
Estudiante
Josue Cerron Tuesta
Estudiante
Santiago Gonzalez
Estudiante
Matías Daniel Cravero
Estudiante
Cristian Diaz
Estudiante
Ameth Ordoñez Erazo
Estudiante
Hans González
Estudiante
Jose Morales Varon
EstudianteRafael Soriano Ramírez
Estudiante
Diana Martinez
Estudiante
John Jairo Caranton Ruiz
EstudianteDiana Martinez
Estudiante
Carlos Rodríguez
EstudianteRafael Soriano Ramírez
Estudiante
Ricardo Portillo
Estudiante
Julian David Alzate Cuervo
EstudianteDiana Martinez
Estudiante
Anderson Eduardo Arévalo Ramírez
Estudiante
Juan Guillermo Perez Cardozo
Estudiante
Jahiker Rojas
Estudiante
Felix Torres Javier Antonio
EstudianteDejen su like para pedir un curso de creación de SVG
Lástima que en Platzi no se tenga un curso de SVg completo
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
<svg viewBox="0 0 300 200">
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 fill="none" stroke="#0689B0" stroke-width="2" points="0,0 100,100 200,100 300,200" />
Wow esto vale oro!
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>
Muy bueno, no tenía ni idea que se podía graficar sobre html nativo!
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
<style scoped> svg { width: 100%; } p { text-align: center; } </style>
Gracias brother
Estos gráficos son bastante interesantes, me gustaría que tuvieran más contenido.
En un proyecto profesional ¿Qué alternativas para crear gráficos de éste tipo se tienen compatibles con Vue 3?
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.
Para este tipo de graficos canvas no seria mejor ?
No necesariamente, este ejemplo solo es didáctico, podrías usar cualquiera de los dos.
Espectacular, no conocía esta herramienta de svg para html!
es un amor conocer esta herramienta, es bueno conocer sus entrañas, aunque en proyectos profesionales ya hay cosas que hacen esto
Los que desean profundizar aquí dejo el Enlace para la documentación del svg
Para estudiar un poco más de SVG
https://www.w3schools.com/graphics/svg_intro.asp
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.
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
oooo pero que bien, no sabia nada de svg. aqui aprendi como hacer un grafico basico y estatico
Que cool! nunca habia creado un svg! estuvo divertido jajaja 😁
Maravilloso SVG!!