这是一款基于SVG、CSS 与原生 JavaScript技术实现的街机显示器风格的柱状折线图。黑色屏幕中，紫色空心立柱与黄色折线共同展示六组数据，青色标签、辉光和扫描线强化复古氛围。鼠标进入柱体或节点时，下方读数跟着变化。图表由脚本拼接 SVG，音效使用浏览器合成，不需要图片或音频文件。
街机柱线图有哪些复古显示与读数反馈
柱状与折线采用独立尺度。两组数值各自归一化到同一绘图区，便于叠加展示。
图表响应指针读数。柱体与方形节点对应不同指标，提示区会显示当前选择的数据。
扫描线与光晕由样式生成。机柜边框和屏幕质感不依赖截图，缩放时仍保留清楚轮廓。
SVG柱体和折线为何使用两组归一化尺度
脚本根据固定 viewBox 和内边距计算位置，柱体高度与折线节点分别来自不同字段。SVG 随容器缩放，文字和线条也跟着变化。提示音使用方波振荡器与音量包络，先经过用户交互才初始化音频，避免声音权限问题影响图表绘制。
const barH = (d.volume / maxVol) * innerH;
霓虹数据屏的指标与颜色在哪里修改
六组标签、数量与得分在 script.js 顶部 data，SVG 布局参数在其后；机柜、颜色、扫描线和阴影在 style.css。加入更多数据时，应同时检查柱宽、标签间距以及两组指标的说明。
街机数据图的尺度和音效使用问题
两条指标可以直接按高度比较大小吗？
不应直接比较绝对数值，因为柱体和折线各有自己的最大值尺度。用于业务时建议明确标注单位或增加双轴说明。
为什么一开始没有提示音？
浏览器通常要求先有点击或键盘操作才能启用声音。页面会在交互后初始化音频，没有声音时仍可查看图表。
包含真实游戏和得分系统吗？
没有。街机外壳用于数据展示，顶部得分与次数是演示文案，不包含投币或游戏流程。
适合复古数据展示、活动统计和街机主题专题。下载后可查看街机数据屏的完整结构与参数，按自己的内容继续调整。
