不同版本的宝可梦游戏中女主角的设定各有特色。本文不讨论“谁更可爱”这种主观题而是从游戏开发视角出发把历代宝可梦女主角作为一个“角色设计演进样本”拆解其中涉及的角色美术风格变化、数据建模、技能交互、前端展示等关键技术点并附上可直接运行的分析脚本和图谱页面示例。不管你是宝可梦玩家还是对游戏角色设计、前端可视化、数据分析感兴趣的技术开发者这篇文章都会有值得复用的内容。1. 背景与核心概念先对齐一个基本概念在《宝可梦》主系列游戏中“女主角”通常指玩家可选择的主角之一或者剧情中承担重要戏份的女性角色。从 Game Boy 时代的《宝可梦 红/绿》到 Switch 时代的《宝可梦 朱/紫》女主角的设定、形象、技术呈现方式经历了巨大变化。技术层面的变化主要体现在五条主线上像素美术到高清建模早期受限于硬件角色只能通过像素点阵表现动作也只有简单的上下左右切换到了 Switch 时代角色已经是全 3D 建模 骨骼动画。2D 战斗动画到 3D 演出女主角在战斗中的出场动作、技能释放、表情变化都依赖动画状态机实现。角色数据的结构化女主角的种族值、可学技能、性格值、个体值等数据从最早硬编码在 ROM 中到后续版本逐渐走向配置表驱动。交互方式的变化从 NPC 对话选择到语音、触摸屏、体感互动前端交互逻辑复杂度提升。跨平台展示需求随着宝可梦 IP 扩展女主角形象需要同时输出到游戏、动画、漫画、周边商品甚至 Web 端展示页这就需要一套可复用的角色资产管理和前端渲染方案。所以这篇文章真正想聊的是如果你是一名开发者面对一个类似“角色设定 用户偏好投票 数据可视化展示”的需求场景你会怎么设计数据模型、怎么编写处理脚本、怎么构建一个前端展示页面以及在过程中容易踩到哪些坑。2. 环境准备与版本说明为了便于动手实践下文会给出两个示例Python 数据分析脚本统计历代主角角色的出场年代、画风关键词、性别比例等数据并输出排名表。HTML JavaScript 页面构建一个“你最喜欢哪个女主角”的投票和展示页面包含角色卡片、投票按钮和统计图表。推荐环境如下操作系统Windows 10/11 或 macOS 均可 Python 版本3.8 及以上 运行方式命令行执行 前端展示现代浏览器Chrome/Edge/Firefox 均可 依赖库pandas数据处理、matplotlib图表绘制版本需要根据你的项目实际情况调整本文示例以常见环境为例重点演示配置思路。如果你的环境没有安装 pandas 和 matplotlib可以执行下面命令pip install pandas matplotlib如果是国内网络环境可以临时指定镜像源pip install pandas matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple前端部分不需要安装任何框架直接使用原生 HTML/CSS/JavaScript 即可方便你把示例代码复制到本地后直接双击打开查看效果。3. 角色数据建模思路在做“最喜欢哪个女主角”这类主题时如果直接写一篇纯文字讨论技术含量有限。更值得做的是把角色数据化、结构化再通过脚本和页面呈现出来。3.1 角色画像字段设计在数据层面我们可以为每个女主角定义一组结构化的属性。这里借鉴游戏角色设计中的常见字段字段名类型说明idint角色唯一编号namestring角色中文名gamestring初次登场作品yearint初次登场年份art_stylestring美术风格像素、点绘、2D、3Drole_typestring主角/劲敌/伙伴color_mainstring主色调featurestring代表性特征关键词模型设计上最需要注意的是字段的唯一性和可扩展性。同一个角色可能会在多个作品中出现例如小遥在《宝可梦 红宝石/蓝宝石》和《宝可梦 欧米伽红宝石/阿尔法蓝宝石》中都有出场如果需要精确区分还应该增加一个version字段。如果只是做简单的角色人气统计那么以“角色 ID 首次登场作品”作为联合主键就足够了。3.2 为什么需要数据建模很多初学者在接到“做一个人气投票展示页”的需求时第一反应是直接在页面上写死几个按钮和名字。但如果角色数量增加到几十个或者需要支持后台动态更新、按年份筛选、按画风分组写死的方式就会变得难以维护。通过数据建模我们只需要维护一份结构化的 JSON 或 CSV 数据前端通过 JavaScript 读取并渲染后端或脚本负责统计分析。数据的增删改不会影响页面代码分析和展示还可以完全解耦。4. 完整实战案例构建角色人气分析工具这一部分我们实现两个模块Python 脚本读取角色数据统计各代作品的女主角分布和热门度排名。前端页面展示角色卡片支持投票并实时刷新柱状图。为了让案例更贴近宝可梦主题下面用公开的系列作品信息作为示例数据。限于篇幅这里选取了代表性的几位女主角作为示例实际项目中你可以按相同结构扩充完整数据。4.1 创建项目结构建议在本地建立一个项目文件夹结构如下pokemon-heroine-analysis/ ├── data/ │ └── heroines.csv ├── analysis.py ├── index.html └── README.md其中data/heroines.csv存放角色基础数据analysis.py负责统计与可视化index.html是前端展示页面。4.2 准备角色数据新建data/heroines.csv内容如下id,name,game,year,art_style,role_type,color_main,feature 1,叶子,宝可梦 火红/叶绿,2004,2D点绘,主角,绿色,温柔坚韧 2,小遥,宝可梦 红宝石/蓝宝石,2002,2D点绘,主角,红色,活力元气 3,小光,宝可梦 钻石/珍珠,2006,2D点绘,主角,粉色,可爱自信 4,斗子,宝可梦 黑/白,2010,2D动画风,主角,橙色,活泼开朗 5,莎莉娜,宝可梦 X/Y,2013,3D建模,主角,紫色,优雅知性 6,莉莉艾,宝可梦 太阳/月亮,2016,3D建模,伙伴,白色,文静神秘 7,小春,宝可梦 旅途,2019,2D动画,伙伴,黄色,温柔大方这里只是一个最小示例集。如果你希望做更完整的统计可以继续按相同格式补充更多角色例如《宝可梦 朱/紫》中的主角等。注意示例中的画风分类是简化处理实际游戏中同一作品可能混合多种表现手法但用于教学演示已经足够。4.3 编写 Python 分析脚本新建analysis.py完整代码如下import pandas as pd import matplotlib.pyplot as plt plt.rcParams[font.sans-serif] [SimHei, Microsoft YaHei, PingFang SC] plt.rcParams[axes.unicode_minus] False def load_data(file_path: str) - pd.DataFrame: 读取 CSV 数据并做基础字段清洗 df pd.read_csv(file_path) df[year] pd.to_numeric(df[year], errorscoerce) df[art_style] df[art_style].fillna(未知) return df def show_role_distribution(df: pd.DataFrame) - None: 按美术风格统计角色数量 print(按美术风格统计) style_count df[art_style].value_counts() print(style_count.to_string()) print() style_count.plot(kindbar) plt.title(宝可梦女主角美术风格分布) plt.xlabel(美术风格) plt.ylabel(角色数量) plt.tight_layout() plt.savefig(style_distribution.png, dpi150) print(图表已保存为 style_distribution.png) def show_year_trend(df: pd.DataFrame) - None: 按年份绘制角色登场数量趋势 df_sorted df.sort_values(year) print(按年份排序的角色列表) for _, row in df_sorted.iterrows(): print(f{row[year]} | {row[name]} | {row[game]} | {row[art_style]}) print() year_count df[year].value_counts().sort_index() plt.figure() year_count.plot(markero, linestyle-) plt.title(宝可梦女主角登场年份趋势) plt.xlabel(年份) plt.ylabel(登场角色数) plt.tight_layout() plt.savefig(year_trend.png, dpi150) print(图表已保存为 year_trend.png) if __name__ __main__: df load_data(data/heroines.csv) print(共读取角色数, len(df)) print(df.head()) print() show_role_distribution(df) show_year_trend(df)然后在项目根目录执行python analysis.py预期输出共读取角色数 7 id name game year art_style role_type color_main feature 0 1 叶子 宝可梦 火红/叶绿 2004 2D点绘 主角 绿色 温柔坚韧 1 2 小遥 宝可梦 红宝石/蓝宝石 2002 2D点绘 主角 红色 活力元气 ...脚本会生成两张图片style_distribution.png和year_trend.png。4.4 编码实现前端投票展示页接下来我们构建一个不需要后端的前端页面数据直接内置在页面里。这个页面实现三个核心功能展示角色卡片。点击“投一票”按钮本地更新票数。用简易柱状图显示当前票数排名。新建index.html完整代码如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title宝可梦女主角人气投票/title style * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; background: #f5f7fa; padding: 40px 20px; color: #2c3e50; } .container { max-width: 1080px; margin: 0 auto; } h1 { text-align: center; margin-bottom: 10px; } .subtitle { text-align: center; color: #7f8c8d; margin-bottom: 32px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 32px; } .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .card h3 { margin-bottom: 6px; font-size: 20px; } .card .game { color: #95a5a6; font-size: 13px; margin-bottom: 12px; } .card .feature { font-size: 14px; margin-bottom: 16px; } .card .vote-btn { display: inline-block; background: #3b82f6; color: #fff; border: none; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: background 0.2s; } .card .vote-btn:hover { background: #2563eb; } .card .votes { margin-top: 12px; font-weight: 600; color: #374151; } .chart-wrap { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .chart-wrap h2 { margin-bottom: 20px; } .bar-row { display: flex; align-items: center; margin-bottom: 14px; } .bar-label { width: 100px; font-weight: 600; } .bar-track { flex: 1; background: #eef2f7; border-radius: 10px; height: 28px; overflow: hidden; margin: 0 12px; } .bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); width: 0; transition: width 0.4s ease; border-radius: 10px; } .bar-value { width: 40px; text-align: right; font-weight: 600; } /style /head body div classcontainer h1宝可梦女主角人气投票/h1 p classsubtitle点击按钮为最喜欢的角色投一票数据仅保存在当前页面/p div classcards idcards/div div classchart-wrap h2当前票数排行/h2 div idchart/div /div /div script const heroines [ { id: 1, name: 叶子, game: 火红/叶绿, year: 2004, feature: 温柔坚韧 }, { id: 2, name: 小遥, game: 红宝石/蓝宝石, year: 2002, feature: 活力元气 }, { id: 3, name: 小光, game: 钻石/珍珠, year: 2006, feature: 可爱自信 }, { id: 4, name: 斗子, game: 黑/白, year: 2010, feature: 活泼开朗 }, { id: 5, name: 莎莉娜, game: X/Y, year: 2013, feature: 优雅知性 }, { id: 6, name: 莉莉艾, game: 太阳/月亮, year: 2016, feature: 文静神秘 }, { id: 7, name: 小春, game: 旅途, year: 2019, feature: 温柔大方 } ]; let votes {}; heroines.forEach(h { votes[h.id] 0; }); function renderCards() { const cardsContainer document.getElementById(cards); cardsContainer.innerHTML ; heroines.forEach(h { const card document.createElement(div); card.className card; card.innerHTML h3${h.name}/h3 div classgame${h.game} · ${h.year}/div div classfeature${h.feature}/div button classvote-btn>import sys import io sys.stdout io.TextIOWrapper(sys.stdout.buffer, encodingutf-8)也可以在执行命令前设置环境变量set PYTHONIOENCODINGutf-8 python analysis.py5.2 柱状图宽度显示异常前端图表中如果maxVotes为 0percent会计算为 0 / 1 0柱条宽度为 0这是符合预期的。但如果某些角色票数特别高其他角色柱条会显得很短影响观感。可以改用对数比例或固定最小值来做视觉平衡。const percent 10 (votes[h.id] / maxVotes) * 90;这样即使票数为 0柱条也会有一段最小宽度视觉上更均衡。6. 最佳实践与工程建议借这个“宝可梦女主角人气投票”的案例总结几条可复用到类似项目的开发建议。6.1 数据结构先行界面后置无论做一个投票页面还是角色图鉴先把数据字段定清楚。字段类型、可空性、枚举值范围都要明确。避免出现“同一个角色在不同作品里有不同名字写法”这种脏数据问题。6.2 前端状态管理要防刷新丢失纯前端页面适合演示但如果要做正式活动建议把票数写到后端或至少用 localStorage 持久化。localStorage 的使用非常轻量// 保存 localStorage.setItem(heroine_votes, JSON.stringify(votes)); // 读取 const saved localStorage.getItem(heroine_votes); if (saved) { votes Object.assign(votes, JSON.parse(saved)); }注意localStorage 存储的是字符串读写时需要使用JSON.stringify和JSON.parse。6.3 投票逻辑要加防刷限制如果页面用于正式活动必须考虑刷票问题。常见方案有限制同一 IP 的投票次数。限制同一浏览器 Cookie 或设备指纹的投票次数。增加验证码或人机校验。在服务端记录每张票的完整来源信息并做异常检测。在教学示例中为了简化没有加防刷但工程化落地时必须考虑。6.4 角色图片资产的命名与版本管理当角色数量变多时图片资源建议按角色 ID 或英文名建立规范目录assets/heroines/ ├── leaf.png ├── may.png ├── dawn.png ├── ...版本管理上图片文件不要用“最终版”“新新最终版”这种命名应该采用语义化版本号leaf_v1.0.png leaf_v2.0.png使用对象存储或 CDN 时还可以在文件名中加入哈希值避免缓存不更新。6.5 关注可访问性为角色卡片设置合适的对比度为投票按钮增加键盘操作支持为图表区域提供文字说明。例如button classvote-btn aria-label为叶子投一票> 从宝可梦女主角演进看角色数据建模与前端可视化实战
不同版本的宝可梦游戏中女主角的设定各有特色。本文不讨论“谁更可爱”这种主观题而是从游戏开发视角出发把历代宝可梦女主角作为一个“角色设计演进样本”拆解其中涉及的角色美术风格变化、数据建模、技能交互、前端展示等关键技术点并附上可直接运行的分析脚本和图谱页面示例。不管你是宝可梦玩家还是对游戏角色设计、前端可视化、数据分析感兴趣的技术开发者这篇文章都会有值得复用的内容。1. 背景与核心概念先对齐一个基本概念在《宝可梦》主系列游戏中“女主角”通常指玩家可选择的主角之一或者剧情中承担重要戏份的女性角色。从 Game Boy 时代的《宝可梦 红/绿》到 Switch 时代的《宝可梦 朱/紫》女主角的设定、形象、技术呈现方式经历了巨大变化。技术层面的变化主要体现在五条主线上像素美术到高清建模早期受限于硬件角色只能通过像素点阵表现动作也只有简单的上下左右切换到了 Switch 时代角色已经是全 3D 建模 骨骼动画。2D 战斗动画到 3D 演出女主角在战斗中的出场动作、技能释放、表情变化都依赖动画状态机实现。角色数据的结构化女主角的种族值、可学技能、性格值、个体值等数据从最早硬编码在 ROM 中到后续版本逐渐走向配置表驱动。交互方式的变化从 NPC 对话选择到语音、触摸屏、体感互动前端交互逻辑复杂度提升。跨平台展示需求随着宝可梦 IP 扩展女主角形象需要同时输出到游戏、动画、漫画、周边商品甚至 Web 端展示页这就需要一套可复用的角色资产管理和前端渲染方案。所以这篇文章真正想聊的是如果你是一名开发者面对一个类似“角色设定 用户偏好投票 数据可视化展示”的需求场景你会怎么设计数据模型、怎么编写处理脚本、怎么构建一个前端展示页面以及在过程中容易踩到哪些坑。2. 环境准备与版本说明为了便于动手实践下文会给出两个示例Python 数据分析脚本统计历代主角角色的出场年代、画风关键词、性别比例等数据并输出排名表。HTML JavaScript 页面构建一个“你最喜欢哪个女主角”的投票和展示页面包含角色卡片、投票按钮和统计图表。推荐环境如下操作系统Windows 10/11 或 macOS 均可 Python 版本3.8 及以上 运行方式命令行执行 前端展示现代浏览器Chrome/Edge/Firefox 均可 依赖库pandas数据处理、matplotlib图表绘制版本需要根据你的项目实际情况调整本文示例以常见环境为例重点演示配置思路。如果你的环境没有安装 pandas 和 matplotlib可以执行下面命令pip install pandas matplotlib如果是国内网络环境可以临时指定镜像源pip install pandas matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple前端部分不需要安装任何框架直接使用原生 HTML/CSS/JavaScript 即可方便你把示例代码复制到本地后直接双击打开查看效果。3. 角色数据建模思路在做“最喜欢哪个女主角”这类主题时如果直接写一篇纯文字讨论技术含量有限。更值得做的是把角色数据化、结构化再通过脚本和页面呈现出来。3.1 角色画像字段设计在数据层面我们可以为每个女主角定义一组结构化的属性。这里借鉴游戏角色设计中的常见字段字段名类型说明idint角色唯一编号namestring角色中文名gamestring初次登场作品yearint初次登场年份art_stylestring美术风格像素、点绘、2D、3Drole_typestring主角/劲敌/伙伴color_mainstring主色调featurestring代表性特征关键词模型设计上最需要注意的是字段的唯一性和可扩展性。同一个角色可能会在多个作品中出现例如小遥在《宝可梦 红宝石/蓝宝石》和《宝可梦 欧米伽红宝石/阿尔法蓝宝石》中都有出场如果需要精确区分还应该增加一个version字段。如果只是做简单的角色人气统计那么以“角色 ID 首次登场作品”作为联合主键就足够了。3.2 为什么需要数据建模很多初学者在接到“做一个人气投票展示页”的需求时第一反应是直接在页面上写死几个按钮和名字。但如果角色数量增加到几十个或者需要支持后台动态更新、按年份筛选、按画风分组写死的方式就会变得难以维护。通过数据建模我们只需要维护一份结构化的 JSON 或 CSV 数据前端通过 JavaScript 读取并渲染后端或脚本负责统计分析。数据的增删改不会影响页面代码分析和展示还可以完全解耦。4. 完整实战案例构建角色人气分析工具这一部分我们实现两个模块Python 脚本读取角色数据统计各代作品的女主角分布和热门度排名。前端页面展示角色卡片支持投票并实时刷新柱状图。为了让案例更贴近宝可梦主题下面用公开的系列作品信息作为示例数据。限于篇幅这里选取了代表性的几位女主角作为示例实际项目中你可以按相同结构扩充完整数据。4.1 创建项目结构建议在本地建立一个项目文件夹结构如下pokemon-heroine-analysis/ ├── data/ │ └── heroines.csv ├── analysis.py ├── index.html └── README.md其中data/heroines.csv存放角色基础数据analysis.py负责统计与可视化index.html是前端展示页面。4.2 准备角色数据新建data/heroines.csv内容如下id,name,game,year,art_style,role_type,color_main,feature 1,叶子,宝可梦 火红/叶绿,2004,2D点绘,主角,绿色,温柔坚韧 2,小遥,宝可梦 红宝石/蓝宝石,2002,2D点绘,主角,红色,活力元气 3,小光,宝可梦 钻石/珍珠,2006,2D点绘,主角,粉色,可爱自信 4,斗子,宝可梦 黑/白,2010,2D动画风,主角,橙色,活泼开朗 5,莎莉娜,宝可梦 X/Y,2013,3D建模,主角,紫色,优雅知性 6,莉莉艾,宝可梦 太阳/月亮,2016,3D建模,伙伴,白色,文静神秘 7,小春,宝可梦 旅途,2019,2D动画,伙伴,黄色,温柔大方这里只是一个最小示例集。如果你希望做更完整的统计可以继续按相同格式补充更多角色例如《宝可梦 朱/紫》中的主角等。注意示例中的画风分类是简化处理实际游戏中同一作品可能混合多种表现手法但用于教学演示已经足够。4.3 编写 Python 分析脚本新建analysis.py完整代码如下import pandas as pd import matplotlib.pyplot as plt plt.rcParams[font.sans-serif] [SimHei, Microsoft YaHei, PingFang SC] plt.rcParams[axes.unicode_minus] False def load_data(file_path: str) - pd.DataFrame: 读取 CSV 数据并做基础字段清洗 df pd.read_csv(file_path) df[year] pd.to_numeric(df[year], errorscoerce) df[art_style] df[art_style].fillna(未知) return df def show_role_distribution(df: pd.DataFrame) - None: 按美术风格统计角色数量 print(按美术风格统计) style_count df[art_style].value_counts() print(style_count.to_string()) print() style_count.plot(kindbar) plt.title(宝可梦女主角美术风格分布) plt.xlabel(美术风格) plt.ylabel(角色数量) plt.tight_layout() plt.savefig(style_distribution.png, dpi150) print(图表已保存为 style_distribution.png) def show_year_trend(df: pd.DataFrame) - None: 按年份绘制角色登场数量趋势 df_sorted df.sort_values(year) print(按年份排序的角色列表) for _, row in df_sorted.iterrows(): print(f{row[year]} | {row[name]} | {row[game]} | {row[art_style]}) print() year_count df[year].value_counts().sort_index() plt.figure() year_count.plot(markero, linestyle-) plt.title(宝可梦女主角登场年份趋势) plt.xlabel(年份) plt.ylabel(登场角色数) plt.tight_layout() plt.savefig(year_trend.png, dpi150) print(图表已保存为 year_trend.png) if __name__ __main__: df load_data(data/heroines.csv) print(共读取角色数, len(df)) print(df.head()) print() show_role_distribution(df) show_year_trend(df)然后在项目根目录执行python analysis.py预期输出共读取角色数 7 id name game year art_style role_type color_main feature 0 1 叶子 宝可梦 火红/叶绿 2004 2D点绘 主角 绿色 温柔坚韧 1 2 小遥 宝可梦 红宝石/蓝宝石 2002 2D点绘 主角 红色 活力元气 ...脚本会生成两张图片style_distribution.png和year_trend.png。4.4 编码实现前端投票展示页接下来我们构建一个不需要后端的前端页面数据直接内置在页面里。这个页面实现三个核心功能展示角色卡片。点击“投一票”按钮本地更新票数。用简易柱状图显示当前票数排名。新建index.html完整代码如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title宝可梦女主角人气投票/title style * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; background: #f5f7fa; padding: 40px 20px; color: #2c3e50; } .container { max-width: 1080px; margin: 0 auto; } h1 { text-align: center; margin-bottom: 10px; } .subtitle { text-align: center; color: #7f8c8d; margin-bottom: 32px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 32px; } .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .card h3 { margin-bottom: 6px; font-size: 20px; } .card .game { color: #95a5a6; font-size: 13px; margin-bottom: 12px; } .card .feature { font-size: 14px; margin-bottom: 16px; } .card .vote-btn { display: inline-block; background: #3b82f6; color: #fff; border: none; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: background 0.2s; } .card .vote-btn:hover { background: #2563eb; } .card .votes { margin-top: 12px; font-weight: 600; color: #374151; } .chart-wrap { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .chart-wrap h2 { margin-bottom: 20px; } .bar-row { display: flex; align-items: center; margin-bottom: 14px; } .bar-label { width: 100px; font-weight: 600; } .bar-track { flex: 1; background: #eef2f7; border-radius: 10px; height: 28px; overflow: hidden; margin: 0 12px; } .bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); width: 0; transition: width 0.4s ease; border-radius: 10px; } .bar-value { width: 40px; text-align: right; font-weight: 600; } /style /head body div classcontainer h1宝可梦女主角人气投票/h1 p classsubtitle点击按钮为最喜欢的角色投一票数据仅保存在当前页面/p div classcards idcards/div div classchart-wrap h2当前票数排行/h2 div idchart/div /div /div script const heroines [ { id: 1, name: 叶子, game: 火红/叶绿, year: 2004, feature: 温柔坚韧 }, { id: 2, name: 小遥, game: 红宝石/蓝宝石, year: 2002, feature: 活力元气 }, { id: 3, name: 小光, game: 钻石/珍珠, year: 2006, feature: 可爱自信 }, { id: 4, name: 斗子, game: 黑/白, year: 2010, feature: 活泼开朗 }, { id: 5, name: 莎莉娜, game: X/Y, year: 2013, feature: 优雅知性 }, { id: 6, name: 莉莉艾, game: 太阳/月亮, year: 2016, feature: 文静神秘 }, { id: 7, name: 小春, game: 旅途, year: 2019, feature: 温柔大方 } ]; let votes {}; heroines.forEach(h { votes[h.id] 0; }); function renderCards() { const cardsContainer document.getElementById(cards); cardsContainer.innerHTML ; heroines.forEach(h { const card document.createElement(div); card.className card; card.innerHTML h3${h.name}/h3 div classgame${h.game} · ${h.year}/div div classfeature${h.feature}/div button classvote-btn>import sys import io sys.stdout io.TextIOWrapper(sys.stdout.buffer, encodingutf-8)也可以在执行命令前设置环境变量set PYTHONIOENCODINGutf-8 python analysis.py5.2 柱状图宽度显示异常前端图表中如果maxVotes为 0percent会计算为 0 / 1 0柱条宽度为 0这是符合预期的。但如果某些角色票数特别高其他角色柱条会显得很短影响观感。可以改用对数比例或固定最小值来做视觉平衡。const percent 10 (votes[h.id] / maxVotes) * 90;这样即使票数为 0柱条也会有一段最小宽度视觉上更均衡。6. 最佳实践与工程建议借这个“宝可梦女主角人气投票”的案例总结几条可复用到类似项目的开发建议。6.1 数据结构先行界面后置无论做一个投票页面还是角色图鉴先把数据字段定清楚。字段类型、可空性、枚举值范围都要明确。避免出现“同一个角色在不同作品里有不同名字写法”这种脏数据问题。6.2 前端状态管理要防刷新丢失纯前端页面适合演示但如果要做正式活动建议把票数写到后端或至少用 localStorage 持久化。localStorage 的使用非常轻量// 保存 localStorage.setItem(heroine_votes, JSON.stringify(votes)); // 读取 const saved localStorage.getItem(heroine_votes); if (saved) { votes Object.assign(votes, JSON.parse(saved)); }注意localStorage 存储的是字符串读写时需要使用JSON.stringify和JSON.parse。6.3 投票逻辑要加防刷限制如果页面用于正式活动必须考虑刷票问题。常见方案有限制同一 IP 的投票次数。限制同一浏览器 Cookie 或设备指纹的投票次数。增加验证码或人机校验。在服务端记录每张票的完整来源信息并做异常检测。在教学示例中为了简化没有加防刷但工程化落地时必须考虑。6.4 角色图片资产的命名与版本管理当角色数量变多时图片资源建议按角色 ID 或英文名建立规范目录assets/heroines/ ├── leaf.png ├── may.png ├── dawn.png ├── ...版本管理上图片文件不要用“最终版”“新新最终版”这种命名应该采用语义化版本号leaf_v1.0.png leaf_v2.0.png使用对象存储或 CDN 时还可以在文件名中加入哈希值避免缓存不更新。6.5 关注可访问性为角色卡片设置合适的对比度为投票按钮增加键盘操作支持为图表区域提供文字说明。例如button classvote-btn aria-label为叶子投一票>