做过股票数据分析的朋友应该都遇到过这种尴尬想在一张图里同时看清楚几只股票近一年的走势对比结果2D折线图堆了七八条线颜色一多几条行情曲线缠在一起根本分不清谁是谁更别说叠加成交量和均线了。我当初就是因为被这种“线缠线”的图折磨得够呛才认真折腾起了股票曲线的3D可视化——把时间、价格、股票本体分别放到三个轴上让每一条线都活在独立的空间位置上视觉上彻底错开。这篇文章不是我拿PPT讲概念而是把整个实现过程里踩过的坑、试过的方案、最后跑通的代码全部摊开从坐标系设计到Three.js落地再给出一套PythonPlotly的快速原型方案最后聊聊我在性能优化和交互设计上的真实体会。1. 被2D图表逼到3D股票曲线可视化的真实需求在哪很多人一听到“3D可视化”就觉得是噱头是炫技其实不完全是。至少在我做的这个项目里3D是实打实解决了一个2D场景下很难绕开的问题——同一个面板里同时呈现多条股票曲线的走势并且还要让观众一眼就能锁定某一只股票的完整形态。1.1 2D图表的容量瓶颈2D图表天生只有两个连续轴通常就是时间和价格。如果是单只股票这两个轴完全够用成交量用副图MACD再做一层副图一层一层往下堆逻辑清晰大家也都习惯了。但问题出在“多股票对比”上当你把十只股票画在同一个坐标系里X轴共享时间Y轴共享价格那些股价不在一个量级的股票就会被强行压在一起。贵州茅台两百多块的时候旁边可能还有一只三块五的股票两者画在同一张图里低价股的波动曲线几乎变成一条水平线任何细节都丢失了。就算你对每只股票做归一化处理全部换算成区间涨幅曲线之间依然会大量重叠。每年A股四千多只股票里走势高度相关的板块随便挑出三五只趋势图拉到一起简直像一捆毛线。2D图表不是不能放多线而是它把“相互遮挡”这个问题完全抛给了用户只能靠交互层的图例开关、悬停高亮来补救本质上是把画布做薄了。1.2 3D到底能多塞哪些维度3D可视化的核心价值就是多了一个可以用作“类别区分”的Z轴。在做股票曲线3D化的时候最常见的语义分配是这样X轴时间向前延伸。Y轴股票价格或区间涨幅。Z轴不同股票或者同一股票的不同指标。这个设计的直接效果是每只股票的曲线就像一堵墙里的独立骨架彼此错开一个深度位置。只要相机角度合适你能同时看见“每只股票的走势全貌”和“多只股票之间的相对位置关系”。这不是单纯的炫技而是信息容量的提升。再多说一句Z轴还可以用来放“非时间维度的指标数据”比如用Z轴表示波动率X轴放时间Y轴放价格加上颜色映射这样能在一张3D空间里看到一个股票的动态风险变化。我实际项目里做的就是前一种——多股票曲线堆叠因为展示效果更直观也方便复现。1.3 谁需要这种东西它输出的价值是什么我把这个需求拆成三类人做投研分析的个人或机构分析师需要快速比较一组候选股票的走势形态3D画面可以用空间纵深代替记忆不需要反复切换图例。前端数据可视化开发接到“股票行情大屏”需求想找一个能让领导觉得“看得清楚”的展示方案。对图形学感兴趣的技术爱好者想知道行情数据怎么变成3D世界里的曲线坐标如何映射交互如何实现。如果你只是看单只股票的K线2D一定更高效。只有当“对比”和“全局形态感知”成为核心诉求时3D才是更合理的选择。做技术选型最怕什么都想上3D先把需求想透再动手不迟。2. 数据准备与坐标系设计先想清楚三个轴的语义这个环节看起来不起眼但它是整个项目的地基。我见过太多人兴致勃勃把数据塞进3D引擎结果渲染出来的画面完全不是那么回事问题几乎都出在坐标系设计上。2.1 行情数据的获取与清洗先解决数据从哪来。公开渠道的行情接口很多国内外的都有比如用Python可以很方便地拉取股票历史行情常见字段无非就是日期、开盘价、收盘价、最高价、最低价、成交量。我自己做原型时通常用Python一次性把数据抓下来存成CSV后续不管是走Three.js还是Plotly都从同一份数据源读。数据清洗这一步容易被忽略但它直接影响最终图形质量。需要处理的典型问题包括停牌导致的日期缺失不同股票的交易日不总是对齐需要基于全市场的交易日历做一次 outer join缺口部分填充空值。价格异常值前复权处理。如果股票发生过除权除息原始价格会出现断崖式跳空不处理的话图形里会出现不合理的垂直落差。上市时间不一致有些股票2015年就上市了有些是2021年才上市。做多股票3D对比时要么统一截取共同区间要么保留各自的完整区间并且缺失部分用空数据带过。我建议统一截取一段大家都存在的时间窗口否则Z轴纵深上一会长线一会短线视觉上会显得很乱。如果你只拉一只股票做3D曲面或者K线柱体清洗压力会小很多但只要你做“多股票对比”这一步必须认真。2.2 多股票的归一化策略接下来是坐标系设计里最核心的一步不同股票价格量级差异巨大怎么放在同一个Y轴上我前面说过如果直接把原始价格丢进去触发价十几块的股票和一百多块的股票共用一个Y轴低价股的曲线会平坦到完全失去信息量。常用的解决办法有三种区间涨幅归一化把每只股票的起始价格作为基准点后续价格全部除以基准价再减一得到的是“从起点开始涨跌了多少百分比”。所有股票的起点都对齐到Y轴的0%位置。这样做的好处是方便比较相对强弱但会丢失绝对价格的认知。对数坐标如果股票价格横跨几个数量级直接用原始价格会让低价部分被压扁。取对数之后倍率关系变成线性的能改善很多。分段错位不归一化而是在Y轴上为每只股票分配一个基准偏移段。股票A中心在80的位置股票B中心在50的位置然后用价格偏离中心值的大小来显示波动。这种方式适合展示“每只股票自己的形态”不需要知道相对收益。我实际做多股票3D时选的是“区间涨幅归一化”也就是每只股票的曲线都从同一水平线出发。这样观众一眼能看出哪只股票涨得多、哪只跌得深不同股票之间还能在Z轴纵深的帮助下看清先后顺序比较效果很直观。2.3 从DataFrame到三维坐标点数据准备好之后就要把每一行数据映射成3D场景里的一个坐标点。假设有三只股票stock_a、stock_b、stock_c数据时间是2023年1月到2024年1月每个交易日一个点坐标映射逻辑如下X交易日序号。因为X轴需要等距直接用日期转时间戳会有周末和节假日造成的坑如果照常画在X轴上周一到周五有5个点接着周末跳空下一周的多个交易日之间距离不相等整条曲线会呈现“锯齿状密度不均”。所以X轴统一用“第几个交易日”的序号再在标签层显示出对应的真实日期。Y区间涨幅或价格。Z股票索引。这里要留一个关键间距间距值是这只股票曲线波动的最大幅度乘以1.5左右。如果Z轴间距太小不同股票在视角旋转时还会遮挡间距太大场景会显得空浪费了屏幕空间。把所有映射算完输出成JSON数组结构大概是每个点一个三元组加上一个颜色字段。到这里3D世界需要的素材就齐了。3. 用Three.js搭一套可交互的3D股票曲线Three.js是Web端做3D图形的实际标准库底层走WebGL浏览器直接打开就能跑不需要额外安装运行时。我的方案里前端负责渲染和交互数据通过JSON传入。这一整套下来能实现的效果是页面加载后看到三只股票的3D曲线悬浮在空间里可以用鼠标拖拽任意旋转视角滚轮缩放鼠标悬停在曲线上时显示该点的股票名称、日期和价格。3.1 场景搭建与基础坐标系先创建一个基础的Three.js场景。Camera用透视相机加了OrbitControls之后就能获得轨道控制器鼠标拖拽旋转、右键平移、滚轮缩放全搞定。以下是基础骨架代码import * as THREE from three; import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js; const scene new THREE.Scene(); scene.background new THREE.Color(0x111827); const camera new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(30, 25, 35); camera.lookAt(0, 0, 0); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; controls.dampingFactor 0.08;一个容易忽略的细节是场景的轴向显示。股票图表的三个轴都有明确业务含义X轴是时间Y轴是涨跌幅Z轴是股票。我直接用Three.js的AxesHelper做辅助轴默认的红绿蓝颜色分别对应X/Y/Z但业务上最好自己在贴图或者标签里写清楚“时间/涨幅/股票”否则用户容易迷惑。我在场景里额外加载了一个TextGeometry的三轴标签分别标注Time、Return、Stock这几行文字的成本不高但信息传达效率提升非常大。3.2 曲线生成Line还是TubeThree.js画一条3D曲线的入门做法是BufferGeometry加Line性能极好代码也短。但在实际渲染股票曲线时单纯用Line有个问题线太细在3D空间里旋转视角后很难看清走势而且没有体积感光线照不到它。对着一条细线看几十秒眼睛特别容易累。我后来改用TubeGeometry方案。TubeGeometry可以让曲线变成一根有粗细的管子本质是把一条中心线膨胀为带半径的圆柱体表面。它的效果明显更“实”配合环境光后会有立体感。代价是顶点数量暴增——一条股票曲线如果有250个交易日的点Line只需要250个顶点而TubeGeometry会沿着路径分段每段再生成数十个环绕顶点。股票曲线通常不止一条所以这里需要做一个取舍。我的建议是原型阶段用Line展示和汇报场景用Tube。如果你想两者兼顾可以把粗细做成uniform只在当前选中高亮的那条曲线用Tube其余保持Line交互效果反而更好。示例代码如下function createCurveLine(points) { const curve new THREE.CatmullRomCurve3(points); const geometry new THREE.TubeGeometry(curve, 200, 0.12, 8, false); const material new THREE.MeshPhongMaterial({ color: 0x60a5fa, emissive: 0x1e3a8a, shininess: 30 }); const mesh new THREE.Mesh(geometry, material); return mesh; }注意这里我用CatmullRomCurve3对点集做了样条插值。原始股票数据只有每个交易日的收盘价点位直接连起来会呈现折线感不够平滑。用样条插值之后曲线自然圆润视觉上更接近“连续变化的趋势”。不过插值需要谨慎如果原始点很少插值会过度圆滑可能让人误判价格转折如果原始点有噪声插值也会把噪声放大。一般来说股票历史日线数据的点足够密Catmull-Rom的张力控制在默认值就行。3.3 曲线底部投影加一层辅助参考线有了3D曲线之后我从一个实际演示场景里发现光看悬浮在半空中的曲线判断具体数值仍然很难。人的视觉系统对“悬浮高度”的感知远远不如“相对于参照物的投影位置”。所以我给每条曲线加了一个投影——把曲线上的每个点投影到Y0的平面上也就是去掉Y坐标保留X和Z再形成一条细线。观众可以从上往下或者从侧视角看到这条投影线当曲线升高或降低时投影线依然保留在基准面上对比起来就像看心电图的地面投影一样直观。这个操作还可以延伸为在投影面上画出K线的实体柱或收盘价阶梯方便确认具体数值。实现投影的代码思路很简单复制点位数组把每个点的y值改成0然后用同样方式生成Line。function createProjectionLine(points, color) { const projected points.map(p new THREE.Vector3(p.x, 0, p.z)); const geometry new THREE.BufferGeometry().setFromPoints(projected); const material new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.35 }); return new THREE.Line(geometry, material); }这条投影线一加整体的空间感和可读性都明显提高。它还有一个隐藏好处不同股票的Z轴位置不同投影线在平面上自然形成前后几条平行的参考轨迹用户能直观感受到“哪只股票在前面哪只股票在后面”立体布局的感知更清晰了。3.4 交互细节悬停采样与信息面板静态的3D场景做得再好缺少交互就像一个模型摆件。我加的第一个核心交互是鼠标悬停显示数据点信息。由于TubeGeometry经过插值后几何体的顶点并不直接对应原始交易日数据如果直接去做射线检测拿到顶点坐标拿到的可能不是真实的行情值而是插值出来的中间值。这里我采用了两个并行的数据结构一个数组保留原始数据点另一个数组保留对应三维坐标。做射线检测时检测的是隐藏的Line对象它保留原始顶点而不是显示用的Tube对象。隐藏Line不可见但参与射线检测这样命中时能拿到原始点的索引回头去原始数据里取日期和价格显示完全准确。const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); function onMouseMove(event) { mouse.x (event.clientX / window.innerWidth) * 2 - 1; mouse.y -(event.clientY / window.innerHeight) * 2 1; raycaster.setFromCamera(mouse, camera); const hits raycaster.intersectObjects(hiddenLines); if (hits.length 0) { const pointIndex hits[0].index; updateInfoPanel(stockMeta[pointIndex]); } }这个方案的代码量不大但它避开了“插值点不等于原始点”的经典陷阱。很多初次做3D图表的人没意识到这一点做出来的悬停数值偶尔偏差几十块钱还以为是精度问题实际上就是射线检测命中了插值点。3.5 动画从平面到立体的入场效果最后让整个场景动起来。我做了一个入场动画3D曲线刚开始是全压缩在Z轴一个平面上的一条平面曲线2秒内逐渐在Z轴方向上展开变成多层的3D形态。这个动画配合上相机视角的缓缓旋转观众先看到的是熟悉的2D股票折线接着画面“立体化”新的维度逐渐展开信息冲击力很强也不会让第一次看的人迷失在陌生透视里。实现方式极其简单动画循环里把每条曲线的Z轴坐标乘以一个随时间从0到1变化的factor重新更新几何体位置即可。也可以用GSAP之类动画库配合tween实现但如果你不想引入额外依赖直接在requestAnimationFrame里用线性插值算就行。4. 快速原型方案Python Plotly 半小时出图如果你不想陷进WebGL的世界只是想快速验证“3D股票曲线”这个想法是否可行或者需要在短时间内出一张静态效果图给同事看我强烈推荐先用PythonPlotly做验证。Plotly的图类型里有一个scatter3d画多条3D折线几乎是零门槛配合它的离线导出功能甚至可以直接生成独立的HTML交互页面。4.1 利用go.Scatter3d画多股票曲线Plotly的用法很直白把数据整理成DataFrame之后直接传给go.Scatter3d。核心代码大致是import plotly.graph_objects as go import pandas as pd # df: columns [symbol, trade_date, normalized_return] fig go.Figure() for symbol in df[symbol].unique(): sub df[df[symbol] symbol] fig.add_trace(go.Scatter3d( xsub[trade_index], ysub[normalized_return], z[symbol_index] * len(sub), modelines, namesymbol, linedict(width6, colorcolors[symbol_index]) )) fig.update_layout( scenedict( xaxis_titleDate Index, yaxis_titleReturn (%), zaxis_titleStock ), margindict(l0, r0, b0, t40) ) fig.write_html(stocks_3d.html)这里的z如果不同股票给不同数值就可以实现和我前面用Three.js做的多股票堆叠完全一样的效果。Plotly自带的交互已经不错了有缩放、旋转、悬浮提示。我实际做的时候发现Plotly对于几千个数据点毫无压力上到几万个点也能保持流畅但如果一次性塞几十万点建议抽稀后再画。4.2 用曲面图做波动率透视3D散点折线还只是第一个层次。Plotly的另一个利器是go.Surface适合做“波动率透视”。把X轴设为时间Y轴设为区间收益分段Z轴设为一支股票在该时间段和收益区间内的成交量或波动率。这样形成的是一个3D曲面凸起越高的地方代表市场在该区域交易踊跃或波动激烈。举个例子贵州茅台近一年日线数据每天能算出一个收益率和对应成交量。我把收益率离散成20个分箱时间轴按月分箱每个格子的Z值填成交量的对数。渲染出来的曲面不会特别平滑但能看到“某几个月份某几个收益区间交易量特别大”这是2D热力图做不到的立体效果。你在演示时旋转曲面观众能更直观看到风险偏好的聚集。fig go.Figure(datago.Surface( xtime_bins, yreturn_bins, zvolume_grid, colorscaleViridis )) fig.update_layout(scenedict( xaxis_titleMonth, yaxis_titleReturn Bin, zaxis_titleLog Volume ))4.3 哪个方案更适合落地对比下来我的建议是任务紧急、只要验证效果直接用Plotly半小时出图改数据也方便写HTML给别人看非常省事。要做成产品功能、嵌入自己的前端系统、需要高度定制交互用Three.js可控性更强性能上限也更高但前期开发量明显更大。对图形效果要求极高、后续要加数据大屏整体特效Three.js起步Canvas纹理、后期特效、光照阴影这些都可以扩展。这两个方案我都在实际项目里用过没有谁绝对碾压谁关键看你的约束条件——时间紧不紧、交互定制到什么程度、最终要在什么环境里跑。5. 3D股票图表的折腾记录那些不吐不快的坑这部分是我最想写的内容。整个项目做下来3D图表真正难的不是三维数学而是很多看似不起眼的细节每一个都能让你浪费一下午调试。5.1 视角遮挡比想象中严重3D图表的通病是“前景挡后景”。三只股票放在不同的Z深度默认相机角度一偏前面的曲线可能正好挡掉后面曲线的关键拐点。观众想看的那个被挡住的波峰无论怎么旋转都找不到合适的角度。我做了两个补偿措施。第一给每条曲线设置不同的颜色并且把后面曲线的材质设成半透明这样即使重叠也能透出后方形态。第二在场景里加一个“亮度跟随深度”的效果远处的曲线调暗一点近处的亮一点人为制造景深感。这本质上是用视觉心理学强化深度线索比单纯依赖几何遮挡要靠谱得多。还有一个更实用的做法在三维场景旁边固定放一个“当前相机视角”的小地图或者俯视图观众能知道自己在从哪个角度看这些曲线不至于旋转半天迷失方向。这个小改动在小屏演示的场景里特别管用。5.2 性能优化的三板斧第一条曲线数据如果两三千个点场景毫无压力。但如果你做的是全市场几千只股票的曲线堆叠几百万个点直接在浏览器里画帧率会掉到没法看。我的优化经验主要这三板斧按需渲染只有相机发生移动、旋转、缩放时才触发render静止时跳过渲染帧省CPU。数据抽稀在视觉差异不大的时间区间内每隔N个点采样一个点曲线外观几乎不变但顶点数量可以降到原来的十分之一。合并几何体多条股票曲线的TubeGeometry逐一单独渲染会创建大量draw call把它们按材质合并成同一个Geometry再渲染性能可以从个位数帧率直接拉回60帧。第二板斧抽稀这里有一点要提醒抽稀会丢失日内细节如果原始数据本身已是日线再抽稀你会发现图形的锯齿消失了其实是细节被吞了。建议抽稀倍数不超过4而且只对“非当前高亮”的曲线抽稀被用户悬停锁定的曲线保持全量数据渲染。5.3 配色与标签的取舍3D场景里配色比2D更苛刻。2D图表白底黑字怎么做都不难看但3D场景有背景色、光照、透明度还有多根曲线前后的遮挡颜色一旦选不好整个画面就是一团乱麻。我的经验是背景用深色深灰蓝、墨色系曲线用高饱和度但明度不刺眼的颜色比如蓝、橙、青、紫。避免使用红配绿这种容易被色弱用户混淆的组合同时在图例区用文字和符号辅助标注颜色。标签的处理也要注意文字放在3D空间里旋转视角时很容易被曲线挡住。可选方案是把“股票名称”标签以Sprite的形式吸附在股票曲线末端隔着多远都能看见但一旦曲线数量超过5条Sprite标签就全是密密麻麻的字这时候更好的做法是只在“当前选中”的曲线上显示标签其余一律隐藏。5.4 业务解读3D曲线好看但别让它说谎最后说一点业务层面的体会。3D可视化确实能让股票数据展现得更立体、更冲击但如果观众不能快速定位数值反而会降低信息传递效率。我做过一次小范围测评找了几个不太熟悉3D图表的同学看同一组数据2D折线图他们平均5秒内能说出“哪只股票涨了”3D图则需要15秒左右而且认知误差更大。结论是3D适合做形态观察和横向感知不适合做精确读值。所以我最后的成品里保留了2D的辅助视图右上角一个小的2D窗口同步展示当前选中股票的2D趋势线精确数值在面板里直接显示。3D负责宏观展示2D负责微观精读这两个组合起来才是完整可用的工具。做数据可视化最忌讳为了酷炫牺牲信息准确性如果你也在做类似项目请务必把这个原则记在心里。回到开头那个场景我现在给朋友演示多股票走势时已经习惯先把画面从平面拉升到立体让曲线各自归位再旋转半圈让他们看清纵深关系。每次看到大家“哦——”的一声我就知道当初这个折腾是值的。技术上没有什么神秘的皇冠就是坐标系、颜色、交互以及无数个被遮挡和性能逼出来的细节优化。