Skip to content

SQL_VISUALIZATION_GUIDE.md

Latest commit

 

History

History
140 lines (100 loc) · 3.43 KB

SQL_VISUALIZATION_GUIDE.md

File metadata and controls

140 lines (100 loc) · 3.43 KB
Raw

SQL 可视化和导出功能使用指南

功能概述

在 public/sql/index.html 中添加了两个新功能：

1. 数据可视化功能

当执行 SQL 查询并选择某个结果集后，系统会自动切换到可视化视图，提供以下图表类型：

支持的图表类型：

  • 表格视图：以表格形式展示数据（默认）
  • 柱状图：适合比较不同类别的数值
  • 曲线图：适合展示趋势变化
  • 饼图：适合展示占比关系

图表配置：

柱状图和曲线图：

  • 可以选择 X 轴字段（默认优先选择时间相关字段）
  • 可以选择 Y 轴字段（默认选择第一个数值字段）
  • 支持动态切换字段

饼图：

  • 自动优先使用包含 "percent" 的字段作为数值
  • 如果没有 percent 字段，使用第一个数值字段
  • 使用其他字段作为标签

2. 数据导出功能

点击右上角的 "导出Excel" 按钮，可以将当前显示的结果集导出为 Excel 文件。

导出特性：

  • 文件格式：.xlsx
  • 文件命名：sql_result_YYYY-MM-DDTHH-MM-SS.xlsx
  • 包含所有列和行数据
  • 保持原始数据格式

技术实现

使用的库：

  1. Chart.js (v3.9.1)：用于图表渲染
  2. SheetJS (v0.18.5)：用于 Excel 文件生成

文件修改：

  1. Gruntfile.js：添加了 Chart.js 和 SheetJS 到构建配置
  2. public/sql/index.html：添加了图表容器和导出按钮
  3. src/app/components/sql/controller.js：实现了图表逻辑和导出功能

关键功能：

图表切换 (switchChartType)

$scope.switchChartType = function(type) {
  $scope.chartType = type;
  // 根据类型显示表格或图表
}

图表更新 (updateChart)

$scope.updateChart = function() {
  // 根据选择的图表类型和字段配置生成图表
}

Excel 导出 (exportToExcel)

$scope.exportToExcel = function() {
  // 使用 SheetJS 将数据导出为 Excel 文件
}

使用示例

场景 1：查看时间序列数据

  1. 执行 SQL 查询获取时间序列数据
  2. 选择结果集
  3. 点击 "曲线图" 按钮
  4. X 轴会自动选择时间字段
  5. Y 轴选择要观察的数值字段
  6. 查看趋势变化

场景 2：比较不同类别

  1. 执行 SQL 查询获取分类数据
  2. 选择结果集
  3. 点击 "柱状图" 按钮
  4. 选择类别字段作为 X 轴
  5. 选择数值字段作为 Y 轴
  6. 比较各类别的数值

场景 3：查看占比分布

  1. 执行 SQL 查询获取占比数据
  2. 选择结果集
  3. 点击 "饼图" 按钮
  4. 系统自动使用 percent 字段或第一个数值字段
  5. 查看各部分占比

场景 4：导出数据

  1. 执行 SQL 查询
  2. 选择要导出的结果集
  3. 点击右上角 "导出Excel" 按钮
  4. 文件自动下载到浏览器默认下载目录

注意事项

  1. 图表功能需要数据中包含数值字段
  2. 饼图最多显示前 10 个数据项（配色限制）
  3. 导出功能会导出当前选中结果集的所有数据
  4. 图表会自动识别数值字段和时间字段
  5. 如果数据量过大，建议使用表格视图或导出后在 Excel 中处理

构建说明

修改代码后需要运行以下命令重新构建：

grunt concat

或完整构建（包含测试）：

grunt build

浏览器兼容性

  • Chrome/Edge: 完全支持
  • Firefox: 完全支持
  • Safari: 完全支持
  • IE11: 不支持（Chart.js v3 不支持 IE）