¿Existe una manera fácil de convertir un conjunto de datos de gráficos en una imagen de polilínea html? Busqué en línea pero no pude encontrar ninguna información. Los sitios web como https://www.coingecko.com/en lo utilizan para guardar datos, al cargar una imagen en lugar de todo el conjunto de datos.
Me gustaría convertir este conjunto de datos
[[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]]Este es un ejemplo del gráfico que me gustaría convertir. solo la linea
var options = { chart: { type: "line", height: 300, }, grid: { show: false,}, yaxis: { show: false}, series: [{ data: [[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]] }], }; var chart = new ApexCharts(document.querySelector("#timeline-chart"), options); chart.render(); <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <div id="chart"> <div id="timeline-chart"></div> </div>Después de mirar el código producido por la biblioteca de gráficos, sería bastante complicado extraer solo la línea del gráfico y convertirla en una polilínea: se dibuja como líneas separadas junto con los iconos y los ejes, por lo que sería necesario desenredarlo.
Parecería más fácil simplemente crear una polilínea a partir de los puntos dados.
Este fragmento toma la matriz de puntos, encuentra los valores mínimo y máximo y crea una polilínea dentro de un svg escalando adecuadamente.
const height = 300; //the number of pixels high the chart is to be const points = [[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]]; const len = points.length; let minx = points[0][0] let maxx = points[0][0]; let miny = points[0][1]; let maxy = points[0][1]; points.forEach( (point) => { minx = (point[0] < minx) ? point[0] : minx; maxx = (point[0] > maxx) ? point[0] : maxx; miny = (point[1] < miny) ? point[1] : miny; maxy = (point[1] > maxy) ? point[1] : maxy; } ); function setup() { const width = window.innerWidth; let svg = '<svg width="' + width + '" height="' + (height+4) + '"><polyline points="'; points.forEach( (point) => { svg = svg + ((point[0] - minx) / (maxx - minx)) * width + ',' + (height - ((point[1] - miny) / (maxy - miny)) * height + 2) + ' '; }); svg = svg + '" stroke-linejoin="round" style="fill: transparent; stroke:blue; stroke-width:4" /></svg>'; document.querySelector('div').innerHTML = svg; } window.onresize = setup; setup(); <div></div>