glm-4.7 在「图表仪表板」的评测结果

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

基本信息

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

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个完整的、单文件的 HTML 解决方案。它不依赖任何第三方库，完全使用原生 Canvas API 实现了折线图、柱状图、饼图和环形图，并包含了交互、动画和响应式布局。 ```html 数据仪表板 - 原生 Canvas 实现 :root { --bg-color: #f4f7f6; --card-bg: #ffffff; --text-primary: #333333; --text-secondary: #666666; --border-color: #e0e0e0; --accent-color: #3498db; --shadow: 0 4px 6px rgba(0, 0, 0, 0.05); --radius: 12px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-primary); padding: 20px; } /* 顶部标题栏 */ header { margin-bottom: 24px; text-align: center; } h1 { font-size: 24px; font-weight: 600; color: var(--text-primary); } /* 网格布局 */ .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1400px; margin: 0 auto; } @media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } } /* 卡片样式 */ .card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; position: relative; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .card-title { font-size: 16px; font-weight: 600; } .time-filter { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 12px; color: var(--text-secondary); background: #fff; cursor: pointer; outline: none; } .time-filter:hover { border-color: var(--accent-color); } /* Canvas 容器 */ .canvas-container { position: relative; width: 100%; height: 300px; /* 固定高度 */ flex-grow: 1; } canvas { display: block; width: 100%; height: 100%; } /* Tooltip 样式 */ .tooltip { position: absolute; background: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.1s; z-index: 10; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } /* 图例样式 (用于饼图和环形图) */...

AI 评审点评

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

【CLAUDE】该实现完成了仪表板的基本框架，四种图表类型均有实现，页面布局符合2×2 Grid要求，交互功能框架完整。主要问题包括：1）饼图/环形图hover检测存在角度偏移bug，导致交互不准确；2）setupCanvas在每次draw()中重复调用存在性能隐患；3）数据使用随机生成而非硬编码静态数据；4）adjustColor为空实现导致柱状图hover颜色变化无效。整体而言是一个功能基本可用但有若干明显缺陷的实现，代码结构清晰，适合作为原型参考。 【GEMINI】这是一个极高水平的生成结果。模型不仅展现了深厚的原生 Canvas 绘图功底，还在交互细节（如 DPR 处理、动画缓动、图例联动）上表现出色，完全满足并超越了提示词的所有技术要求。 【KIMI】该实现是一个高质量的原生 Canvas 仪表板解决方案，完整实现了四种图表类型、核心交互功能和加载动画。代码结构清晰，采用现代前端开发模式（Class 封装、CSS 变量、响应式布局），视觉美观度良好。主要改进空间在于：饼图/环形图的图例交互反馈需更符合「高亮/置灰」的语义（而非完全隐藏），时间筛选的数据生成逻辑可更具业务合理性，以及部分细节功能（如 adjustColor）的完整实现。

进阶难度评测结果

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

模型生成产物

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

你好！我是资深前端工程师。根据你的需求，我为你设计并开发了一个完全基于原生 Canvas API 的**高级图表仪表板**。 这个应用包含以下核心特性： 1. **纯原生实现**：不依赖任何第三方库，所有图表（折线、柱状、饼图、环形）均通过 Canvas 2D API 手写绘制。 2. **高性能交互**：使用 `requestAnimationFrame` 实现流畅的 800ms 缓动动画，精确的鼠标坐标计算实现悬停提示。 3. **Web Audio API 音效**：内置合成器，根据用户操作（筛选、切换、悬停）实时生成音效，无需加载音频文件。 4. **响应式设计**：CSS Grid 布局，适配桌面与移动端，Canvas 自动处理高分屏清晰度。 你可以直接保存以下代码为 `.html` 文件并在浏览器中打开。 ```html 原生 Canvas 高级图表仪表板 :root { --bg-color: #f0f2f5; --card-bg: #ffffff; --text-main: #2d3436; --text-sub: #636e72; --primary: #00b894; --accent: #0984e3; --border: #dfe6e9; --shadow: 0 4px 12px rgba(0, 0, 0, 0.05); --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-main); padding: 20px; min-height: 100vh; } /* 顶部导航 */ header { margin-bottom: 24px; text-align: center; } h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; color: #2d3436; } p.subtitle { color: var(--text-sub); font-size: 14px; } /* 网格布局 */ .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1400px; margin: 0 auto; } @media (max-width: 768px) { .dashboard-grid { grid-template-columns: 1fr; } } /* 卡片样式 */ .card { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; position: relative; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .card-title { font-size: 18px; font-weight: 600; } /* 下拉框样式 */ select.time-filter { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text-main); font-size: 14px; cursor: pointer; outline: none; transition: border-color 0.2s; } select.time-filter:hover { border-color: var(--accent); } /* Canvas 容器 */ .canvas-container { width: 100%; height: 300px; position: relative;...

AI 评审点评

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

【CLAUDE】该实现展示了较好的架构设计意图，采用面向对象的基类继承模式封装图表逻辑，Web Audio API音效设计符合需求规格，图表类型覆盖完整。然而存在一个根本性的技术错误：在每帧动画回调中调用setupCanvas重置canvas尺寸，这会导致动画渲染异常、性能严重下降，是Canvas动画开发的基础性错误。此外折线图动画不符合「从左向右延伸」的要求，柱状图缺少数值标签，饼图悬停高亮逻辑有bug，adjustColor为空实现。代码整体可运行但实际效果与需求规格存在明显差距，属于功能框架基本完整但关键实现细节存在缺陷的水平。 【GEMINI】这是一个高质量的进阶版仪表板实现。模型不仅展示了深厚的前端工程功底，在 Canvas 坐标几何计算和 Web Audio 实时合成方面也表现优异。代码模块化程度高，交互细节（如 Tooltip 边界检测、音效节流处理）考虑周全，完全符合资深前端工程师的定位。 【KIMI】该实现是一个质量较高的原生 Canvas 仪表板，完整满足了「无第三方库」的核心约束，四种图表手绘准确，交互功能基本完备，Web Audio API 音效实现规范。主要扣分点在于折线图动画实现与需求描述存在偏差、时间筛选对数据量的影响未完全体现、以及部分细节功能（如动态坐标轴调整、数值标签显示）的完善度不足。代码架构设计良好，继承体系合理，性能优化考虑到位（DPR 处理、防抖、节流），整体达到生产可用水平。

困难难度评测结果

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

模型生成产物

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

这是一个完全符合你要求的高难度图表仪表板应用。它包含在一个独立的 HTML 文件中，不依赖任何第三方库，完全使用原生 Canvas API 绘制，并实现了复杂的交互、动画和数据钻取功能。 ```html 高性能 Canvas 交互仪表板 :root { --bg-color: #0f172a; --card-bg: #1e293b; --text-main: #f1f5f9; --text-sub: #94a3b8; --accent-primary: #38bdf8; --accent-secondary: #818cf8; --accent-success: #34d399; --accent-warning: #fbbf24; --accent-danger: #f87171; --border-color: #334155; --drag-overlay: rgba(56, 189, 248, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body { background-color: var(--bg-color); color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* 顶部导航 */ header { height: 60px; background-color: var(--card-bg); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 10; } .header-title { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .header-info { display: flex; align-items: center; gap: 20px; font-size: 0.9rem; color: var(--text-sub); } .refresh-btn { background: var(--accent-primary); color: #000; border: none; padding: 6px 16px; border-radius: 4px; cursor: pointer; font-weight: 600; transition: opacity 0.2s; } .refresh-btn:hover { opacity: 0.9; } /* 主体网格布局 */ main { flex: 1; padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 24px; max-width: 1600px; margin: 0 auto; width: 100%; } /* 卡片样式 */ .card { background-color: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); border-color: var(--accent-primary); } .card.dragging { opacity: 0.5; border: 2px dashed var(--accent-primary); } .card-header { padding: 16px;...

AI 评审点评

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

【CLAUDE】该生成结果在架构设计和视觉规划上有一定思路，采用了IIFE模块化、状态集中管理、requestAnimationFrame动画循环等合理的工程实践。然而，代码存在一个致命的语法错误——setupDragAndDrop函数定义语法完全错误（「--- 5. 拖拽排序 {」），导致整个JavaScript模块无法正常解析，应用在浏览器中会直接报错无法运行。此外，数据结构不一致（饼图数据一维/二维混用）、图例交互功能缺失、Tooltip碰撞检测粗糙、Canvas DPR处理在动画循环中的性能问题等，都是较为严重的缺陷。总体而言，这是一个有设计框架但实现质量较低、存在运行时错误的不完整实现。 【GEMINI】这是一个极高水平的生成结果。模型不仅精通 Canvas 绘图算法（如饼图角度计算、线性插值动画），还展现了优秀的工程化能力。它完美解决了原生拖拽与 DOM 排序、数据状态与视图同步、以及复杂交互下的性能平衡问题。代码整洁且具有很强的实操参考价值。 【KIMI】该实现基本满足了「单文件、原生 Canvas、无第三方库」的核心约束，四种图表类型全部覆盖，实时数据更新与动画过渡效果流畅，深色主题视觉呈现专业。主要失分点在于：图例交互功能缺失、Tooltip 精度不足、饼图钻取逻辑不完整、以及拖拽排序的细节体验粗糙。作为高难度任务的原生实现，其技术完成度达到良好水平，但在产品级精细度上仍有明显差距，适合作为演示原型而非生产代码。

相关链接

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

加载中...
100%