SVG 绘制柱形图和折线图：让数据一目了然

前端

2023-09-14 14:51:22

使用 SVG 绘制简洁实用的柱形图和折线图：让数据一目了然

在当今数据至上的时代，数据可视化已成为一项必不可少的技能，使复杂的数据变得易于理解和消化。在众多可视化工具中，SVG（可缩放向量图形）凭借其无损缩放、清晰锐利的特性脱颖而出。

SVG 的优势

SVG 是一种基于 XML 的图形格式，相较于传统的基于像素的格式（如 PNG、JPG）拥有以下优势：

无损缩放： SVG 图像可以任意缩放而不会失真，始终保持清晰度。
矢量图形： SVG 图像由路径和形状组成，而不是像素，因此可任意缩放。
可编辑性： SVG 图像可以使用文本编辑器或图像编辑软件（如 Illustrator 或 Inkscape）轻松编辑。
文本清晰： SVG 图像中的文本始终清晰锐利，无论缩放级别如何。

使用 SVG 创建柱形图

绘制柱形图的第一步是创建一个 SVG 文档。我们使用一个简单数组存储数据：

var data = [
  { name: "一月", value: 100 },
  { name: "二月", value: 200 },
  { name: " března", value: 300 },
  { name: "四月", value: 400 },
  { name: " května", value: 500 }
];

使用 SVG 的 <rect> 元素创建柱形，并使用 <text> 元素添加标签：

for (var i = 0; i < data.length; i++) {
  var bar = document.createElement("rect");
  bar.setAttribute("x", 100 + i * 100);
  bar.setAttribute("y", 100);
  bar.setAttribute("width", 50);
  bar.setAttribute("height", data[i].value);
  bar.setAttribute("fill", "blue");

  var text = document.createElement("text");
  text.setAttribute("x", 100 + i * 100 + 25);
  text.setAttribute("y", 100 + data[i].value + 5);
  text.setAttribute("fill", "black");
  text.textContent = data[i].name;

  document.body.appendChild(bar);
  document.body.appendChild(text);
}

使用 SVG 创建折线图

绘制折线图的步骤与柱形图类似，但使用 SVG 的 <polyline> 元素创建折线：

var line = document.createElement("polyline");
line.setAttribute("points", "100,100 200,200 300,300 400,400 500,500");
line.setAttribute("fill", "none");
line.setAttribute("stroke", "blue");
line.setAttribute("stroke-width", "2");

document.body.appendChild(line);