如何将图表转换为 HTML 折线答案

【问题标题】：How to convert a Chart to HTML Polyline如何将图表转换为 HTML 折线
【发布时间】：2021-11-11 12:13:12
【问题描述】：

有没有一种简单的方法可以将图表数据集转换为 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>

【问题讨论】：

您想将线条转换为实际完整的 SVG 图像，还是只想制作一条折线（图表软件生成的线条元素之外？）

标签： javascript html css polyline

【解决方案1】：

查看图表库生成的代码后，仅提取图形线并将其制成折线会非常麻烦 - 它在图标和轴旁边绘制为单独的线，因此需要一些解开。

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

这个 sn-p 获取点数组，找到最小值和最大值，并通过适当的缩放在 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();

&lt;div&gt;&lt;/div&gt;

【讨论】：