首页html里用svg绘制折线图，显示文字标签和数据标签，代码

html里用svg绘制折线图，显示文字标签和数据标签，代码

时间: 2024-10-25 11:06:57 浏览: 13

在HTML中使用SVG（Scalable Vector Graphics）绘制折线图，可以结合JavaScript或者D3.js这样的库来动态生成。下面是一个简单的示例，展示了如何创建一个基本的折线图，并包含文本标签（标题和数据标签）： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .chart { width: 400px; height: 300px; margin: 50px auto; } </style> </head> <body> <div class="chart"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <g id="lineChart"> <line stroke-width="2" stroke="#007bff"></line> </g>  <text x="50%" y="95%" dy=".3em" text-anchor="middle" font-size="20px"> 折线图标题 </text> <text id="dataLabel" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="16px" fill="gray"> (数据将在JavaScript中添加) </text> </svg> </div> <script> // JavaScript代码，假设我们有数据数组 const data = [/* 插入你的数据数组，例如 [{x: 0, y: 0}, {x: 25, y: 50}, ...] */]; // 获取SVG元素并更新数据标签 const dataLabel = document.getElementById('dataLabel'); data.forEach((point, index) => { dataLabel.textContent += `(${point.x}, ${point.y}) `; }); // 使用D3.js或其他库绘制折线 // 这部分代码通常在单独的函数或模块中完成，这里简化示例 const line = d3.line() .x(point => point.x) .y(point => point.y); const linePath = d3.select('#lineChart') .append('path') .datum(data) .attr('d', line); </script> </body> </html> ``` 在这个例子中，JavaScript负责处理数据和动态更新数据标签。实际应用中，你可能需要根据需求调整样式、数据源以及图表的功能。

阅读全文