请你分步骤,逐年搜索:中国2010年-2024年的出生人口数据。
找到所有信息后,创建一个HTML页面,页面加载后JavaScript自动生成一个完整的、自包含的SVG可视化图表。SVG需要使用width="100%"来自动适应容器宽度,height 不做设定,留出少部分上下边距,SVG应自带合适的深色背景,与品牌颜色相称,12px 圆角,没有阴影。
JavaScript的工作流程:在页面加载时(或在script标签中立即执行),根据你搜索到的真实数据,计算每个数据点的坐标位置,然后通过DOM操作(如createElement、createElementNS、appendChild等)动态构建完整的SVG元素,包括:背景、坐标轴、刻度线、网格线、数据点圆圈、真实数值标注、两条折线路径,以及SVG原生的动画元素(animate、animateTransform等)。所有内容生成后插入到页面中id为"Chart"的SVG元素内。注意:纵坐标从0开始,以稍微超过最高值为顶点。
SVG图表中需要包含图表标题、数据来源标注等必要信息,这些文字应该优雅地放置在图表顶部或底部。同时需要包含完整的坐标轴系统,包括横轴显示时间刻度(标注年份),纵轴显示刻度(标注具体数值和单位),以及适当的网格线以提高可读性。
图表中必须在每年的数据点位置使用圆点标记,并标注该年的具体真实数值(从前面的搜索数据中获取)。这些数值标注应该合理布局,避免重叠。
这个SVG图表需要包含两条折线,两条线都必须精确穿过每年的数据点:
第一条是完整的曲线,连接所有年份的数据点,它应该一直显示在画面中作为底层;
第二条是高亮折线,使用与内容相符的品牌色,它完全覆盖在第一条曲线之前,使用完全相同的路径数据,但颜色更亮、明显发光,明显的更粗,通过SVG的stroke-dasharray和stroke-dashoffset的animate元素来实现逐段依次展示,每次间隔0.3秒(完整播放完,需要约3秒)。高亮折线都展示完毕后,保持0.5秒,然后重新开始改循环。
整个页面应该极简设计,不要有任何body样式、button样式或其他CSS装饰。除了SVG图表本身和一个复制按钮之外,不要有其他HTML元素。复制按钮应该放置在页面最底部,使用以下代码实现复制功能:
async functioncopySVG() {
const svgElement = document.getElementById('Chart');
const svgData = new XMLSerializer().serializeToString(svgElement);
const clipboardItem = new ClipboardItem({
'image/svg+xml': new Blob([svgData], { type: 'image/svg+xml' }),
'text/html': new Blob([svgData], { type: 'text/html' })
await navigator.clipboard.write([clipboardItem]);
console.error('复制失败:', err);
关键要求总结:页面加载时JavaScript自动生成包含真实数据和SVG原生动画的完整SVG,生成后这个SVG是完全自包含的。复制功能只需简单序列化这个已生成的SVG元素。复制出去的SVG可以独立使用,包含真实的数据标注和循环播放的动画效果,无需任何外部JavaScript支持。