Elephant 在「图表仪表板」的评测结果

基本信息

• 模型名称：Elephant
• 用例名称：图表仪表板
• 测试类型：网页生成
• 评测维度：仪表盘

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端开发工程师，专精于原生 Canvas API 绘图与 HTML/CSS/JavaScript 单文件应用开发。 回答要求： 1. 严禁使用 ECharts、Chart.js、D3.js 等任何第三方图表库，所有图表必须使用原生 Canvas 2D API 手动绘制。 2. 所有代码（HTML、CSS、JavaScript）必须封装在单个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖。 3. Canvas 绘图需保证坐标计算准确，坐标轴刻度、数据点位置与实际数值严格对应，不得出现视觉错位。 4. 代码结构清晰，HTML/CSS/JS 各司其职，变量命名语义化，关键逻辑需有简短注释。 5. 输出完整的、可直接复制运行的 HTML 代码，不得省略任何部分。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

请使用原生 HTML + CSS + JavaScript（Canvas API）生成一个图表仪表板页面，所有代码写在单个 HTML 文件中。 ## 页面布局 - 页面顶部有标题栏（「数据仪表板」） - 主体区域采用 2×2 CSS Grid 网格布局，包含 4 个图表卡片 - 每个卡片包含：卡片标题、时间筛选下拉框（选项：近7天 / 近30天 / 近90天）、Canvas 图表区域 - 页面整体风格简洁，卡片有圆角、阴影效果 ## 图表要求（均使用原生 Canvas 2D API 绘制） 1. **折线图**（卡片1：访问量趋势） - 展示过去 7 天的每日访问量（静态数据，自行设计合理数值） - 绘制 X 轴（日期标签）、Y 轴（数值刻度）、网格线、折线及数据点 - 坐标轴刻度与数据值严格对应 2. **柱状图**（卡片2：产品销售对比） - 展示 5 个产品的销售额对比（产品A~E，静态数据） - 绘制 X 轴（产品名）、Y 轴（销售额刻度）、各产品柱形（不同颜色区分） 3. **饼图**（卡片3：用户来源分布） - 4 个来源：直接访问、搜索引擎、社交媒体、外部链接 - 绘制各扇形区域，颜色区分，图例显示在图表旁边（名称 + 百分比） 4. **环形图**（卡片4：任务完成率） - 3 个状态：已完成、进行中、待处理 - 在环形中心显示总任务数，图例显示各状态数量及占比 ## 交互功能 - **Hover 提示**：鼠标悬停在数据点（折线图）、柱形（柱状图）、扇形（饼图/环形图）上时，在鼠标附近显示该数据的名称和数值 - **图例点击**：饼图和环形图的图例项可点击，点击后对应扇形高亮或置灰（切换显示状态） - **加载动画**：页面加载时，4 个图表均有简单的绘制动画（如折线从左到右绘出、柱形从底部升起、饼图/环形图扇形旋转展开） ## 数据要求 - 使用硬编码的静态数据，数值合理（如访问量在 500~5000 之间，销售额在 1000~50000 之间） - 时间筛选下拉框切换时，可更新对应图表的数据（为不同时间段准备不同的静态数据集）

任务要求

AI 模型需要满足以下要求：

1. Canvas 坐标计算准确性：4 个图表的坐标轴刻度、数据点/柱形/扇形位置与实际数值严格对应，不存在视觉错位或比例失真
2. 图表类型完整性：折线图、柱状图、饼图、环形图均使用原生 Canvas API 正确绘制，包含坐标轴（折线/柱状）、图例（饼/环形）等必要元素
3. Hover 交互实现：鼠标悬停时能准确识别命中的数据区域，并在合适位置显示包含名称和数值的提示框
4. 加载动画效果：页面初始化时 4 个图表均有可见的绘制动画，动画流畅（使用 requestAnimationFrame）
5. 时间筛选联动：下拉框切换时对应图表数据更新并重新绘制，不同时间段数据有明显差异
6. 代码结构与可读性：单文件结构完整，HTML/CSS/JS 职责清晰，关键函数有注释，无第三方库依赖

评测结果

综合得分

该模型在此用例的得分为：85.7 分（满分 100 分），已通过

基础难度评测结果

• 得分：85.7 分
• 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 数据仪表板 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #333; min-height: 100vh; } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px 32px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .header h1 { font-size: 28px; font-weight: 600; letter-spacing: 2px; } .dashboard { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; padding: 24px; max-width: 1400px; margin: 0 auto; min-height: calc(100vh - 120px); } .card { background: white; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 20px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.12); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .card-title { font-size: 16px; font-weight: 600; color: #2c3e50; } .time-select { padding: 6px 12px; border: 1px solid #dcdfe6; border-radius: 6px; background: white; font-size: 13px; cursor: pointer; outline: none; transition: border-color 0.2s; } .time-select:focus { border-color: #667eea; } .canvas-container { flex: 1; position: relative; min-height: 280px; } canvas { display: block; width: 100%; height: 100%; } .tooltip { position: fixed; background: rgba(0,0,0,0.8); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; pointer-events: none; z-index: 1000; opacity: 0; transition: opacity 0.2s; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -8px; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(0,0,0,0.8); } .tooltip.visible { opacity: 1; } 📊 数据仪表板 📈 访问量趋势 近7天 近30天 近90天 📦 产品销售对比 近7天 近30天 近90天 🥧 用户来源分布 近7天 近30天 近90天 🔄...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一份高质量的代码实现。作者展现了深厚的原生 Canvas 功底，不仅解决了坐标映射和图形绘制，还处理了响应式缩放和高分屏适配。页面布局美观，代码结构极佳，易于维护。唯一的遗憾是漏掉了“图例点击切换显示状态”这一特定的交互需求，但在其他交互（如动画和提示框）上表现出色。 【KIMI】整体上，代码实现了大部分功能要求，包括四种图表的绘制、Hover 数据提示、加载动画以及时间筛选联动。页面布局规范，代码结构清晰。主要扣分项在于缺少图例点击交互的实现。如果能够补全图例交互功能，并优化柱状图数值标签的显示，将进一步提升代码质量。

进阶难度评测结果

• 得分：79.4 分
• 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 图表仪表板（进阶版） * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #333; min-height: 100vh; } .header { background: #2c3e50; color: #ecf0f1; padding: 24px 32px; text-align: center; } .header h1 { font-size: 28px; font-weight: 600; margin-bottom: 8px; } .header p { font-size: 14px; opacity: 0.8; } .dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; max-width: 1200px; margin: 0 auto; } .card { background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.2s; } .card:hover { transform: translateY(-2px); } .card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f0f0f0; background: #fafbfc; } .card-title { font-size: 16px; font-weight: 600; color: #2c3e50; } .time-select { padding: 6px 12px; border: 1px solid #dcdfe6; border-radius: 6px; background: #fff; font-size: 13px; cursor: pointer; outline: none; } .canvas-container { position: relative; width: 100%; height: 300px; } canvas { display: block; width: 100%; height: 100%; } .legend { padding: 12px 20px; display: flex; gap: 16px; flex-wrap: wrap; border-top: 1px solid #f0f0f0; background: #fafbfc; } .legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; padding: 4px 8px; border-radius: 4px; transition: all 0.2s; } .legend-item:hover { background: rgba(0,0,0,0.04); } .legend-item.hidden { opacity: 0.4; } .legend-color { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .tooltip { position: fixed; background: rgba(44, 62, 80, 0.92); color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 13px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 1000; max-width: 200px; line-height: 1.5; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .tooltip.visible {...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一份架构设计非常优秀但细节逻辑存在致命疏漏的作品。模型展现了深厚的前端工程化能力，使用了类继承结构来组织复杂的 Canvas 逻辑，并精准实现了 Web Audio API 的各项细节要求。然而，柱状图逻辑中缺失了关键的 yMax 定义，且折线图 Y 轴未实现真正的动态伸缩（硬编码上限），这在数据可视化任务中是较为严重的失误。如果修复数据映射逻辑，这将是一个极高水平的交付。 【KIMI】整体而言，代码实现了题目要求的主要功能，包括四种图表的 Canvas 手绘、进阶交互功能以及音效触发等。图表绘制质量较高，动画效果流畅自然。代码组织结构相对清晰，性能表现良好。但在坐标轴刻度动态调整、AudioContext 初始化等方面还有待完善。总体来说，代码实现了题目要求的核心功能，表现良好，但还有改进空间。

困难难度评测结果

• 得分：78.8 分
• 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 数据仪表板 * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0f0f23; color: #e0e0e0; font-family: 'Segoe UI', 'PingFang SC', sans-serif; overflow-x: hidden; min-height: 100vh; } /* 顶部导航 */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: linear-gradient(135deg, #1a1a3e 0%, #2a2a5e 100%); border-bottom: 1px solid #333; position: sticky; top: 0; z-index: 100; } .topbar h1 { font-size: 20px; font-weight: 600; background: linear-gradient(90deg, #4facfe, #00f2fe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .topbar-info { display: flex; align-items: center; gap: 24px; } .topbar-info span { font-size: 13px; color: #888; } .topbar-info span strong { color: #00f2fe; font-mono: monospace; } .refresh-btn { padding: 8px 18px; background: #4facfe; border: none; border-radius: 6px; color: #0f0f23; font-weight: 600; cursor: pointer; transition: all 0.3s; } .refresh-btn:hover { background: #3a9df0; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4); } /* 网格布局 */ .dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; max-width: 1400px; margin: 0 auto; } /* 卡片样式 */ .card { background: #1a1a3e; border: 1px solid #333; border-radius: 12px; overflow: hidden; transition: box-shadow 0.3s; position: relative; cursor: grab; } .card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } .card.dragging { opacity: 0.5; cursor: grabbing; } .card.drag-over { border-color: #4facfe; box-shadow: 0 0 0 2px #4facfe inset; } /* 卡片头部 */ .card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #151530; border-bottom: 1px solid #333; user-select: none; } .card-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .drag-handle { color: #666; cursor: move; font-size: 14px; } .time-filter { padding: 5px 10px; border-radius: 6px; border:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】该生成结果在代码工程化质量和 Canvas 渲染视觉效果上表现出色，展现了极强的技术底蕴。图表美观且动画流畅。然而，在功能完整性方面存在若干遗憾，特别是漏掉了题目要求的 setInterval 自动更新和柱状图点击钻取这两个关键交互细节。如果能完善交互事件的绑定和定时任务的闭环，将是一个近乎完美的交付物。 【KIMI】整体上，代码实现了仪表板的核心功能要求，包括Canvas手绘图表、实时数据更新、拖拽布局和数据钻取等，在功能实现的完整性和准确性方面表现良好。但在图表动画效果、视觉美观度、代码工程质量等方面还有优化空间。建议进一步优化Canvas渲染性能，改进代码组织和注释，提升交互体验和视觉效果。

相关链接

您可以通过以下链接查看更多相关内容：

• 查看所有模型在此用例的表现：「图表仪表板」
• 查看该模型的所有评测结果：Elephant
• 浏览同维度的其他用例：「仪表盘」
• 返回排行榜首页