来源：AI开发日志公众号专辑「Build Your Own X With AI」
原文链接：https://mp.weixin.qq.com/s?__biz=MzUxMjg3MjE2OA==&mid=2247486115&idx=1&sn=19d39508befa3ad80b88bf7c16a6b8a7&chksm=f95c9124ce2b183281f4e008fad6c82e793b82db6e79c0d89e80d9164d55d35a609919c81e67#rd

中国高铁出行人数排行榜

一个动态的条形图竞赛排行榜可视化系统,用于展示中国高铁出行人数随时间的变化趋势。

功能特性

🎬 动态动画 - 平滑的排名变化和数值增长动画

🎨 精美设计 - 深色/浅色主题,渐变色条形图,城市天际线背景

🎮 交互控制 - 播放/暂停/重置,速度调节,时间轴拖动

📊 数据可视化 - 清晰的排名、图标、名称和数值展示

📱 响应式设计 - 适配桌面、平板和手机设备

💾 数据导出 - 支持导出PNG图片和CSV数据

🖥️ 全屏模式 - 沉浸式观看体验

快速开始

克隆或下载项目

git clone https://github.com/build-your-own-x-with-ai/china-railway-ranking

cd china-railway-ranking

启动本地服务器

由于浏览器的CORS限制,需要使用本地服务器运行项目。

使用Python:

Python 3

python -m http.server 8000

Python 2

python -m SimpleHTTPServer 8000

使用Node.js:

npx http-server -p 8000

在浏览器中打开

访问 http://localhost:8000 即可查看排行榜。

数据源选择:

默认显示: 高铁站客流量排行(按月,2024年1月-2025年11月)

切换数据: 点击页面顶部的按钮切换不同数据源

高铁站排行(按月): 23个月数据

高铁线路排行(按季度): 23个季度数据

深圳地铁排行(按日): 15天数据

或直接访问:

http://localhost:8000?data=stations

(高铁站数据)

http://localhost:8000?data=lines

(高铁线路数据)

http://localhost:8000?data=metro

(深圳地铁数据)

项目结构

china-railway-ranking/

├── index.html # 主页面

├── src/

│ ├── css/

│ │ └── style.css # 样式文件

│ ├── js/

│ │ ├── DataManager.js # 数据管理器

│ │ ├── AnimationEngine.js # 动画引擎

│ │ ├── Renderer.js # Canvas渲染器

│ │ ├── Controller.js # 控制器

│ │ └── main.js # 应用入口

│ └── data/

│ └── sample-data.json # 示例数据

├── assets/

│ └── icons/ # 图标文件(可选)

└── README.md

数据格式

数据文件使用JSON格式,结构如下:

{

“title”:”中国高铁出行人数排行榜”,

“timeUnit”:”quarter”,

“frames”:[

{

“date”:”2020-Q1”,

“label”:”2020年第1季度”,

“data”:[

{

“id”:”beijing-shanghai”,

“name”:”京沪线”,

“value”:2927862,

“icon”:”/assets/icons/beijing-shanghai.png”,

“color”:”#00d4ff”

}

]

}

]

}

字段说明

title: 排行榜标题
timeUnit: 时间单位(如”month”, “quarter”, “year”)
frames: 时间帧数组
id: 唯一标识符(必需)
name: 显示名称(必需)
value: 数值(必需)
color: 条形图颜色,十六进制格式(必需)
icon: 图标路径(可选)
date: 日期标识符
label: 显示的时间标签
data: 该时间帧的数据项数组

自定义数据

创建数据文件

在 src/data/ 目录下创建新的JSON文件,按照上述格式填写数据。

修改数据源

编辑 src/js/main.js,修改数据文件路径:

controller.init(‘src/data/your-data.json’);

准备图标(可选)

如果使用图标,将图标文件放在 assets/icons/ 目录下,并在数据中引用正确的路径。

使用说明

控制按钮

播放/暂停: 控制动画的播放和暂停
重置: 将动画重置到第一帧
速度: 调整播放速度(0.5x, 1x, 2x)
时间轴: 拖动滑块跳转到指定时间帧

高级功能

主题切换: 点击月亮图标切换深色/浅色主题
全屏模式: 点击全屏图标进入全屏观看
导出: 点击导出图标可以导出PNG图片或CSV数据

浏览器兼容性

Chrome 90+

Firefox 88+

Safari 14+

Edge 90+

技术栈

HTML5 Canvas

图形渲染

原生JavaScript

核心逻辑

CSS3

样式和动画

性能优化

使用requestAnimationFrame实现流畅的60fps动画

Canvas高DPI屏幕适配

图标预加载和缓存

高效的插值算法

常见问题

Q: 为什么在本地打开HTML文件无法加载数据?

A: 由于浏览器的CORS安全策略,需要使用本地服务器运行项目。请参考”快速开始”部分。

Q: 如何修改动画速度?

A: 可以通过界面上的速度按钮调整,或者修改 AnimationEngine 的配置参数。

Q: 支持多少个数据项?

A: 理论上没有限制,但建议每帧显示10-20个数据项以获得最佳视觉效果。

Q: 可以使用实时数据吗?

A: 可以。修改 DataManager 的 loadData 方法以支持从API获取数据,并实现数据更新机制。

许可证

MIT License

贡献

欢迎提交Issue和Pull Request!

Made with ❤️ for data visualization