GLM-5.1 在「图表仪表板」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：图表仪表板
  • 测试类型：网页生成
  • 评测维度：数据看板

系统提示词（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 职责清晰，关键函数有注释，无第三方库依赖

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html 数据仪表板 :root { --bg: #0f1117; --card: #1a1d27; --border: #2a2d3a; --fg: #e8eaed; --muted: #7a7f8e; --accent: #ff6b35; --accent2: #00d4aa; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--fg); font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; min-height: 100vh; overflow-x: hidden; } /* 背景光斑 */ body::before { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 25% 35%, rgba(255,107,53,0.04) 0%, transparent 50%), radial-gradient(circle at 75% 65%, rgba(0,212,170,0.04) 0%, transparent 50%); animation: bgFloat 25s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes bgFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-2%, -2%) rotate(1deg); } } /* 标题栏 */ header { position: relative; z-index: 1; padding: 22px 36px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; background: rgba(15,17,23,0.8); backdrop-filter: blur(12px); } header .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #fff; box-shadow: 0 2px 12px rgba(255,107,53,0.3); } header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; background: linear-gradient(90deg, var(--fg), var(--muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } header .subtitle { font-size: 13px; color: var(--muted); margin-left: auto; } /* 主区域 */ main { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 36px; max-width: 1440px; margin: 0 auto; } /* 卡片 */ .card { background: var(--card); border-radius: 16px; border: 1px solid var(--border); padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.25); transition: transform 0.25s ease,...

AI 评审点评

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

【CLAUDE】该实现整体质量优秀，完整满足所有核心需求。Canvas 绘图准确且美观，坐标计算严谨，四种图表类型均正确实现；交互功能完备，Hover 提示、图例点击和加载动画均流畅可用；页面布局规范，代码结构清晰可维护。主要亮点包括：自动刻度计算算法、高 DPI 适配、缓动动画、深色主题设计。小瑕疵包括引入外部字体库（可改为系统字体栈完全消除依赖）、resize 后未重新播放动画、部分交互反馈可进一步增强。作为单文件 Canvas 仪表板实现，已达到生产可用水平。 【GEMINI】这是一份极高水平的交付结果。模型不仅满足了所有基础的功能性要求，还在原生 Canvas 绘图的细节（如 niceScale 算法、极坐标命中检测、DPI 适配）上展现了深厚的前端功底。图表动画丝滑，交互反馈准确，代码结构优美，完全不依赖任何第三方库即实现了一个视觉和交互体验俱佳的仪表板。 【KIMI】该实现是一个高质量的原生Canvas仪表板，功能完整、视觉精美、交互流畅。四种图表类型均正确实现，坐标计算严谨，动画效果细腻，代码结构清晰可维护。主要改进点在于图例隐藏后的数据重计算逻辑（百分比、中心文字、扇形角度应基于可见数据重新计算），以及完全消除外部依赖（可改用系统字体栈）。整体达到生产可用水准。

进阶难度评测结果

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

模型生成产物

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

```html 数据仪表板 :root { --bg: #F0F4F8; --fg: #1E293B; --muted: #94A3B8; --accent: #0D9488; --accent2: #06B6D4; --card: #FFFFFF; --border: #E2E8F0; --nav-bg: #0F172A; --nav-fg: #F8FAFC; --shadow: 0 4px 24px rgba(15,23,42,0.08); --shadow-hover: 0 8px 32px rgba(15,23,42,0.13); --radius: 14px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: 'Noto Sans SC', 'Space Grotesk', sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; } /* 背景纹理 */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(13,148,136,0.06), transparent), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(6,182,212,0.05), transparent); } header { position: relative; z-index: 2; background: var(--nav-bg); padding: 28px 40px 24px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); } header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2), #F59E0B); } .header-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .header-icon svg { width: 24px; height: 24px; fill: #fff; } header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--nav-fg); letter-spacing: -0.5px; } header p { font-size: 0.85rem; color: rgba(248,250,252,0.5); margin-top: 2px; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }...

AI 评审点评

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

【CLAUDE】这是一个高质量的 Canvas 图表仪表板实现。代码完全满足「禁止第三方图表库」的核心约束，四种图表均使用原生 Canvas 2D API 手绘，图表元素完整且视觉精美。进阶交互功能（时间筛选联动、Tooltip、图例切换、加载动画、Web Audio 音效）实现完整，命中检测逻辑精确，动画流畅自然。代码架构清晰，性能优化到位，响应式布局适配良好。主要改进空间在于：悬停音效节流应按图表独立实现、hitAreas 缓存可优化、部分配置常量可提取。整体而言，这是一个功能完备、代码规范、用户体验优秀的单文件 Canvas 图表应用，充分展示了原生 Canvas API 的绘图能力和 Web Audio API 的音效合成能力。 【GEMINI】这是一份极其优秀的原生 Canvas 开发示例。开发者展现了深厚的数学计算功底（坐标转换、极坐标判定、刻度算法）和对 Web 标准（Web Audio, requestAnimationFrame）的精准掌控。在不依赖任何第三方库的情况下，实现了一个交互丰富、视觉美观且性能卓越的数据仪表板，完全满足并超出了所有评测指标。 【KIMI】该实现整体质量较高，四种图表的手绘效果精致，交互功能完整，代码结构清晰。在 Canvas 绘制精度、动画流畅度和音效实现方面表现优秀，基本满足所有核心要求。主要改进点在于：增强边界情况处理（如小扇区标签、数据生成算法）、完善动画取消与无障碍支持、以及减少对外部资源的依赖。作为单文件无依赖的仪表板实现，已达到生产可用水平。

困难难度评测结果

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

模型生成产物

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

```html 数据仪表板 :root{ --bg:#0c0e14;--bg2:#111320;--card:#161923;--border:#252836;--border-h:#353950; --text:#e2e4e9;--text2:#9ca3af;--muted:#6c7293; --accent:#00e5a0;--accent-d:rgba(0,229,160,.12); --orange:#ff7043;--indigo:#5c6bc0;--amber:#ffd54f;--rose:#f06292; --r:12px;--rs:8px;--tr:.3s cubic-bezier(.4,0,.2,1); } *{margin:0;padding:0;box-sizing:border-box} body{font-family:'Space Grotesk',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh; background-image:radial-gradient(ellipse at 15% 50%,rgba(0,229,160,.04) 0%,transparent 50%), radial-gradient(ellipse at 85% 20%,rgba(92,107,192,.04) 0%,transparent 50%), radial-gradient(ellipse at 50% 90%,rgba(255,112,67,.03) 0%,transparent 50%)} header{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:rgba(17,19,32,.85); border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(14px)} .h-left{display:flex;align-items:center;gap:12px} .logo{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--indigo));border-radius:8px;flex-shrink:0} .h-title{font-size:18px;font-weight:700;letter-spacing:-.5px} .h-right{display:flex;align-items:center;gap:14px} .live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,229,160,.5)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(0,229,160,0)}} .update-time{font-size:12px;color:var(--muted);white-space:nowrap} .refresh-btn{display:flex;align-items:center;gap:5px;padding:7px 14px;background:var(--accent-d);color:var(--accent); border:1px solid rgba(0,229,160,.2);border-radius:var(--rs);font-family:inherit;font-size:12px;font-weight:500; cursor:pointer;transition:var(--tr);white-space:nowrap} .refresh-btn:hover{background:rgba(0,229,160,.2);border-color:rgba(0,229,160,.4)} .refresh-btn svg{flex-shrink:0}...

AI 评审点评

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

【CLAUDE】这是一个高质量的 Canvas 仪表板实现，完全满足「严禁使用第三方图表库」的硬性要求。四种图表类型均使用原生 Canvas API 手绘，坐标系计算精确，交互流畅，视觉设计专业。三大核心功能（实时更新、拖拽布局、数据钻取）实现完整且逻辑正确，代码架构清晰，状态管理规范，动画性能优化到位。主要扣分点在于：实时更新仅覆盖折线图单一图表，饼图钻取子分类数据为静态硬编码未联动时间筛选，以及部分工程细节（resize 防抖策略、函数拆分、移动端适配）可进一步优化。整体达到高难度任务的优秀水准，代码可直接用于生产环境并作为 Canvas 图表开发的参考范例。 【GEMINI】这是一个卓越的 AI 生成案例。在不依赖任何第三方库的情况下，利用原生 Canvas 2D API 构建了一个功能完备、交互复杂的仪表板应用。其在实时数据插值动画、双重钻取逻辑以及拖拽布局持久化方面的表现尤为出色，视觉设计专业且符合深色主题审美，体现了极高的前端工程化水平。 【KIMI】该实现是一个高质量的原生 Canvas 仪表板应用，完整覆盖了题目要求的四种图表类型和三大核心功能。代码结构清晰，视觉设计专业，动画流畅。主要扣分点在于：拖拽体验的精细度不足（缺少占位元素）、部分交互细节未完全对齐需求（如实时更新范围、模态框 Tooltip）、以及少量数据一致性瑕疵（环形图中心总数）。整体而言，这是一个可直接运行、具备生产级潜力的优秀实现。

相关链接

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

加载中...
100%