0
250
VistasDibuja SVG a partir de datos json usando javascript
¿Cómo dibujar un diagrama de contexto en base SVG en los datos json devueltos?
Ejemplo de datos json:
"data":{ "PageType":"Home", "CatId":0, "Category":"", "ObjectId":0, "Object":"", "Total":1, "Prev":[ { "type":"Prev1", "Count":1, "Time":0 }, { "type":"Prev2", "Count":2, "Time":0 }, { "type":"Prev3", "Count":3, "Time":0 }, ], "Next":[ { "type":"Next1", "Count":1, "Time":1000 } { "type":"Next2", "Count":2, "Time":1000 }, { "type":"Next3", "Count":3, "Time":1000 } ] }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Bien, esto no es un problema, es solo un ejercicio de implementación. No te estoy dando el resultado, solo algunos consejos. Estos son los elementos básicos de tu SVG. El <g> está agrupando los elementos y se puede mover con el atributo de transformación.
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <style> line, rect {stroke-width: 1; stroke: navy; fill: none;} text {fill: navy;} </style> <g transform="translate(200 150)"> <rect x="-50" y="-20" width="100" height="40" rx="10" /> <text dominant-baseline="middle" text-anchor="middle" width="100">Text 1</text> <line x1="50" y1="0" x2="100" y2="60" /> </g> </svg> Entonces tiene que ser dinámico. Conoces el tamaño de cada elemento y el espaciado. Con un bucle forEach() puede recorrer todos los elementos de una lista y "esparcirlos". Simplemente "añado" los nuevos elementos SVG con ...innerHTML += ...
var prev = { "Prev": [{ "type": "Prev1", "Count": 1, "Time": 0 }, { "type": "Prev2", "Count": 2, "Time": 0 }, { "type": "Prev3", "Count": 3, "Time": 0 }, ] }; var drawing = document.getElementById('drawing'); prev.Prev.forEach((p, i, arr) => { let x = 55; let y = 250/arr.length*i+50; drawing.innerHTML += `<g transform="translate(${x} ${y})"> <rect x="-50" y="-20" width="100" height="40" rx="10" /> <text dominant-baseline="middle" text-anchor="middle" width="100">${p.type}</text> <line x1="50" y1="0" x2="100" y2="${250/arr.length-y+50}" /> </g>`; }); <svg id="drawing" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <style> line, rect {stroke-width: 1; stroke: navy; fill: none;} text {fill: navy;} </style> </svg>Esto debería estar bien para implementar todo usted mismo :-)
·
Juan Pablo Isaza
Denunciar
Responde la pregunta