28. 📊 数据可视化 Data Visualization ★★★★☆

🌏 Web 网页规范

  • 图表选型决策树引导机制
  • D3.js / SVG 高度自定义矢量重绘
  • 多配色方案与全局色彩语义映射

📱 App 移动端规范

  • 轻量级原生渲染图表组件
  • SwiftUI Charts / Canvas 骨架屏占位
  • 移动端微缩图表与低数据密度展示

Web 宽屏多维可视化与动态交互

Web Multi-dimensional Charts & Rich Tooltips

Web 网页端以大屏幕承载高密度信息,通常采用 SVG / Canvas 或 WebGL (例如 D3.js, ECharts) 来渲染具有动态缩放、框选、悬停 tooltip 和十字线辅助的复杂多维报表。

App 移动图表简化与震动感知

App Mobile Simplified Charts & Haptic Value Feedback

App 移动端受屏幕尺寸限制,采用微缩图表 (Sparklines) 并降低单屏数据密度。结合振动 API,在用户手指轻触图表峰值节点时提供短促的物理振动反馈以增强触觉感知。

LIVE PLAYGROUND: SVG 动态柱状图/折线图渲染器 切换图表类型,调整数据密度,查看矢量图形重绘并体验悬停 Tooltip 反馈效果
https://web.meta-ui.edu/dataviz
09:41
📶 🔋
数据点个数: 5
值: 0%
📋 大模型统一 Prompt (LLM Prompt)