如何将图表数据集转换为HTML Polyline格式的折线图片？

你需要的实现逻辑是将原始时序坐标映射到SVG画布坐标系，直接生成仅含折线元素的可直接渲染的SVG文件，无需加载完整数据集或第三方图表库，和CoinGecko的折线存储方案逻辑完全匹配。

核心实现步骤 #

• 第一步：提取数据集的极值，分别统计x轴（时间戳）的最大值、最小值，y轴（数值）的最大值、最小值
• 第二步：坐标映射，把原始坐标映射到你指定的SVG画布宽高范围内，注意SVG坐标系y轴原点在左上角，需要对y值做翻转处理，保证折线走势和常规折线图一致
• 第三步：拼接映射后的坐标为polyline的points属性，生成完整SVG代码，可直接嵌入HTML或者保存为独立.svg文件使用

完整转换代码（JS实现） #

// 传入参数：原始数据集、SVG宽度、SVG高度、折线颜色
function convertToPolylineSVG(dataset, width = 400, height = 100, lineColor = '#4ade80') {
  // 提取所有x和y的值
  const xValues = dataset.map(item => item[0])
  const yValues = dataset.map(item => item[1])
  const xMin = Math.min(...xValues)
  const xMax = Math.max(...xValues)
  const yMin = Math.min(...yValues)
  const yMax = Math.max(...yValues)

  // 坐标映射函数
  const mapX = x => (x - xMin) / (xMax - xMin) * width
  const mapY = y => height - (y - yMin) / (yMax - yMin) * height

  // 生成points字符串
  const points = dataset.map(item => `${mapX(item[0])},${mapY(item[1])}`).join(' ')

  // 生成SVG代码
  return `
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
  <polyline points="${points}" fill="none" stroke="${lineColor}" stroke-width="2"/>
</svg>
  `.trim()
}

// 你的原始数据集
const myDataset = [[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]]

// 调用函数生成SVG
const resultSVG = convertToPolylineSVG(myDataset, 600, 200, '#f59e0b')
console.log(resultSVG)

转换效果说明 #

生成的SVG代码可以直接插入到HTML页面中渲染，不需要加载任何额外资源，体积仅为几KB，完全符合你要的“直接展示图片而非加载完整数据集”的需求。你可以根据自己的需要调整折线的颜色、粗细、SVG的宽高等参数。

内容的提问来源于stack exchange，提问作者Reginald1234