我让他找一下英伟达本年的股价,然后他要自己上网搜很屡次,然后写代码、生成 svg、再用 js 导出,作用仍是能够的
我猜...你很想要这个 prompt,在这了,你能够把「英伟达」改成随意什么其他
请你分过程,逐月查找,找到自2025年1月至10月,英伟达的月末总市值数据。
找到一切信息后,创立一个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的stroke-dasharray和stroke-dashoffset的animate元从来完成逐段顺次展现,每次距离0.3秒(完好播映完,需求约3秒)。高亮折线秒,然后重新开端改循环。
整个页面应该极简规划,不要有任何body款式、button款式或其他CSS装修。除了SVG图表自身和一个仿制按钮之外,不要有其他HTML元素。仿制按钮应该放置在页面最底部,运用以下代码完成仿制功用:
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支撑。