doubao-seed-1-8 在「图表仪表板」的评测结果

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

基本信息

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

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

以下是完整的单文件数据仪表板代码，包含所有要求的布局、图表和交互功能： ```html 数据仪表板 /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fa; padding: 20px; } .header { text-align: center; margin-bottom: 30px; color: #333; font-size: 28px; font-weight: 600; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 25px; max-width: 1400px; margin: 0 auto; } .chart-card { background-color: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 20px; } .chart-card h3 { color: #333; margin-bottom: 15px; font-size: 18px; } .chart-controls { margin-bottom: 20px; } .chart-controls select { padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: white; cursor: pointer; font-size: 14px; } .chart-container { position: relative; height: 300px; } canvas { width: 100%; height: 100%; } .tooltip { position: absolute; background-color: rgba(0,0,0,0.8); color: white; padding: 8px 12px; border-radius: 6px; font-size: 14px; pointer-events: none; display: none; z-index: 10; } .legend { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .legend-item { display: flex; align-items: center; gap: 8px; cursor: pointer; } .legend-color { width: 16px; height: 16px; border-radius: 4px; } .legend-item.disabled .legend-color { opacity: 0.3; } 数据仪表板 访问量趋势 近7天 近30天 近90天 产品销售对比 近7天 近30天 近90天 用户来源分布 近7天 近30天 近90天 任务完成率 近7天 近30天 近90天 // 全局数据 const chartData = { line: { 7: { dates: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7'], values: [1200, 1500, 900, 1800, 2200, 1600, 2000] }, 30: { dates: Array.from({length:30}, (_,i) => `6/${i+1}`), values: Array.from({length:30}, () => Math.floor(Math.random()*2000)+1000) }, 90: { dates: Array.from({length:90}, (_,i) => `6/${i+1}`), values: Array.from({length:90}, () => Math.floor(Math.random()*2500)+800) } }, bar: { 7: { products:...

AI 评审点评

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

【GEMINI】这是一份高质量的原生 Canvas 开发实现。模型展现了深厚的前端功底，在不依赖任何第三方库的情况下，精准完成了复杂的坐标计算、动态动画和交互逻辑。页面视觉风格简洁现代，代码组织严谨，完全符合「资深前端工程师」的人设要求。仅有的瑕疵是长代码输出时的尾部截断，但不影响对其技术能力的正面评价。 【KIMI】该生成结果展示了较好的代码组织能力和Canvas基础绘图能力，折线图的实现相对完整，包含坐标计算、网格线、动画效果等。但存在严重的代码截断问题——四个图表中仅折线图完整，柱状图被截断，饼图和环形图的绘制函数、图例交互、Hover事件处理等核心功能完全缺失。此外，时间筛选的数据更新逻辑、图例点击交互等关键功能均未展示。由于代码不完整，大量需求无法实现，建议补充完整的四个图表绘制函数、事件监听逻辑和静态数据集定义。

进阶难度评测结果

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

模型生成产物

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

以下是完整的图表仪表板实现，所有功能均通过原生Canvas、HTML/CSS和JavaScript完成，无任何第三方依赖： ```html 数据可视化仪表板 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f0f2f5; color: #333; padding: 20px; } header { text-align: center; margin-bottom: 30px; padding: 20px; background-color: #165DFF; color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 25px; max-width: 1400px; margin: 0 auto; } .chart-card { background-color: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.2s ease; } .chart-card:hover { transform: translateY(-2px); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .card-header h3 { font-size: 1.2rem; font-weight: 600; } .time-select { padding: 6px 12px; border: 1px solid #ddd; border-radius: 6px; background-color: white; cursor: pointer; font-size: 0.9rem; } canvas { width: 100%; height: 300px; border-radius: 8px; } .legend { display: flex; justify-content: center; gap: 20px; margin-top: 15px; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; cursor: pointer; font-size: 0.9rem; transition: opacity 0.2s ease; } .legend-item.hidden { opacity: 0.4; } .legend-color { width: 16px; height: 16px; border-radius: 50%; margin-right: 6px; } #tooltip { position: absolute; background-color: rgba(0,0,0,0.8); color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; pointer-events: none; z-index: 1000; opacity: 0; transition: opacity 0.2s ease; } @media (max-width: 768px) { .dashboard-grid { grid-template-columns: 1fr; } .chart-card { padding: 15px; } canvas { height: 250px; } } 数据可视化仪表板 实时数据监控与分析平台 访问量趋势 近7天 近30天 近90天 访问量 产品销售额 近7天 近30天 近90天 产品A 产品B 产品C 产品D 产品E 用户来源分布 近7天 近30天 近90天 直接访问 搜索引擎...

AI 评审点评

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

【GEMINI】这是一个高质量的进阶前端开发实现。模型不仅精通 Canvas 绘图算法（如坐标转换、动态刻度计算），还完美集成了 Web Audio API 和复杂的交互逻辑。代码结构严谨，完全脱离第三方库实现了商业级图表组件的雏形，展现了深厚的前端工程功底。 【KIMI】该实现展示了扎实的前端工程能力，折线图类的代码质量较高，架构设计合理。但致命问题是代码被截断，仅能看到约40%的实现内容，四种图表中仅折线图完整可见，其余三种图表及核心交互逻辑（Tooltip精确命中、三种图表的动画细节）均无法验证。从已有代码判断开发者具备完成全部需求的技术能力，但提交物不完整导致无法确认最终交付质量。建议在完整代码基础上重新评估。

困难难度评测结果

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

模型生成产物

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

以下是完整的单文件HTML代码，实现了所有要求的图表类型和核心功能，采用深色主题设计，所有图表均使用原生Canvas手绘，支持实时更新、拖拽布局、数据钻取等功能： ```html 数据仪表板 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #121212; color: #e0e0e0; padding-top: 70px; } /* 顶部导航栏 */ .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #1e1e1e; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 100; } .navbar h1 { font-size: 1.5rem; font-weight: 600; } .update-info { display: flex; gap: 1rem; align-items: center; } .update-btn { background-color: #3700b3; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .update-btn:hover { background-color: #6200ee; } /* 网格布局 */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 1.5rem; padding: 2rem; max-width: 1400px; margin: 0 auto; } /* 图表卡片 */ .chart-card { background-color: #1e1e1e; border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.2s, box-shadow 0.2s; cursor: move; position: relative; } .chart-card.dragging { opacity: 0.5; transform: scale(0.98); } .chart-card.drag-over { border: 2px dashed #6200ee; background-color: rgba(98, 0, 238, 0.1); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .card-title { font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } .drag-handle { font-size: 1.2rem; opacity: 0.5; } .time-filter { background-color: #2d2d2d; color: white; border: 1px solid #3d3d3d; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; } .chart-container { position: relative; } .chart-canvas { width: 100%; height: 300px; border-radius: 4px; } /* Tooltip */ .tooltip { position: absolute; background-color: rgba(0,0,0,0.9); color: white;...

AI 评审点评

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

【GEMINI】这是一个高质量的资深前端水平交付结果。模型不仅完美遵循了「禁止第三方库」的严苛限制，还在原生 Canvas 动画平滑度、复杂的拖拽排序逻辑以及深色模式的视觉呈现上表现优异。代码架构具有很强的可维护性，完全满足高难度仪表板的技术要求。 【KIMI】该代码片段展示了一个功能完整的仪表板应用的结构框架，包含4种图表的DOM布局、深色主题样式、基础状态管理设计和响应式网格。但存在严重的代码截断问题，JavaScript部分在关键位置中断，导致核心的Canvas绘制函数、拖拽交互逻辑、数据更新动画、钻取功能实现等全部无法验证。从已展示的结构来看，开发者理解需求并具备组织复杂前端应用的能力，但实际可运行性和功能完整性因代码不完整而严重受损。建议补充完整的JavaScript实现，特别是Canvas 2D绘制函数、Drag and Drop事件处理、以及数据动画插值逻辑。

相关链接

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

加载中...
100%