如何将图表转换为 HTML 折线

Question

有没有一种简单的方法可以将图表数据集转换为 html 折线图像。我在网上查看，但找不到任何信息。 https://www.coingecko.com/en 之类的网站在加载图像而不是整个数据集时使用它来保存数据。

我想转换这个数据集

[[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 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>

Answer 1

查看了图表库生成的代码后，如果仅提取图形线并制作成折线会非常混乱 - 它是在图标和轴旁边绘制为单独的线，因此需要一些理清。

从给定的点创建折线似乎更容易。

此代码段获取点数组、查找最小值和最大值并通过适当缩放在 svg 中创建多段线。

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>

如何将图表转换为 HTML 折线

How to convert a Chart to HTML Polyline

html

javascript

css

polyline