第 24 天：如何用 JavaScript 生成 SVG 图表

SVG 还能与前端库完美配合。下面是一个 React 组件生成数据驱动图表的示例。在这个示例中，我们有两件事。我们正要成一个矩形列表，以便根据一些任意数据创建一个列图。此外，我们还为折线生成了一系列坐标。

对于简单的用例，你可以像这样编写自己的图表。但如果你需要更复杂的图表，那么可以使用 D3 库。D3 库使用 SVG 创建各种图表。

function Diagram() {
  const dataPoints = [3, 4, 7, 5, 3, 6];
  const sineWave = Array.from({ length: 115 })
    .map((item, index) => `${index - 55},${Math.sin(index / 20) * 20 + 10}`)
    .join(" ");

  return (
    <svg width="200" height="200" viewBox="-100 -100 200 200">
      {dataPoints.map((dataPoint, index) => (
        <rect
          key={index}
          x={index * 20 - 55}
          y={50 - dataPoint * 10}
          width="15"
          height={dataPoint * 10}
          fill="#CD803D"
        />
      ))}

      <polyline points={sineWave} fill="none" stroke="black" stroke-width="5" />
    </svg>
  );
}