零代码搞定数据可视化：Data Formulator拖拽式界面全攻略

你还在为生成可视化图表编写复杂代码？还在为数据转换耗费数小时？Data Formulator的拖拽式编码架子让普通用户也能3分钟创建专业图表，无需编程基础，只需简单配置即可实现AI驱动的数据可视化。本文将带你掌握这一革命性工具的核心操作，读完你将能够：

• 使用拖拽界面快速配置可视化图表
• 利用AI自动完成复杂数据转换
• 掌握编码架子的核心组件与工作流程
• 从零开始创建交互式数据可视化报告

核心界面概览

Data Formulator的拖拽式编码架子采用直观的三栏布局，让数据可视化变得前所未有的简单：

主界面布局：左侧为数据线程面板，中间是可视化区域，右侧为编码配置区

核心区域功能

1. 数据线程面板：跟踪你的数据探索过程，支持分支探索和结果锚定
2. 可视化区域：实时预览图表效果，支持缩放和交互式探索
3. 编码配置区：通过拖拽完成图表属性配置，无需编写代码

界面初始化时会显示数据加载向导，支持从多种数据源导入数据：

// 数据加载界面核心代码 [src/views/DataFormulator.tsx]
<Box sx={{paddingTop: "8%", display: "flex", flexDirection: "column", textAlign: "center"}}>
  <Box component="img" sx={{ width: 256, margin: "auto" }} alt="" src={dfLogo} />
  <Typography variant="h3" sx={{marginTop: "20px"}}>
    {toolName}
  </Typography>
  <Typography variant="h4">
    Load data from
    <TableSelectionDialog  buttonElement={"Examples"} />, 
    <TableUploadDialog buttonElement={"file"} disabled={false} />, 
    <TableCopyDialogV2 buttonElement={"clipboard"} disabled={false} /> or 
    <DBTableSelectionDialog buttonElement={"Database"} />
  </Typography>
</Box>

拖拽式编码核心组件

1. 概念库（Concept Shelf）

概念库是可视化配置的基础，包含所有可用的数据字段和操作符，支持拖拽到编码区域：

概念库展示不同数据源的字段，支持按类别分组和搜索

概念库的核心实现位于 src/views/ConceptShelf.tsx，主要功能包括：

• 数据字段分组展示
• 自定义字段创建
• 拖拽功能支持
• 字段类型可视化标识

// 概念库字段卡片组件 [src/views/ConceptShelf.tsx]
{displayFields.map((field) => (
  <ConceptCard key={`concept-card-${field.id}`} field={field} />
))}

2. 编码架子（Encoding Shelf）

编码架子是拖拽配置的核心区域，通过将概念库中的字段拖拽到不同通道（Channel）完成图表配置：

编码架子支持x轴、y轴、颜色等多维度编码配置

编码架子的实现位于 src/views/EncodingShelfCard.tsx，支持多种高级配置：

• 聚合操作（求和、平均、计数等）
• 排序方式设置
• 颜色方案选择
• 数据转换参数调整

// 编码通道配置组件 [src/views/EncodingBox.tsx]
<Box ref={drop} className="channel-encoded-field">
  <IconButton onClick={() => { setEditMode(!editMode) }}>
    <Typography variant="caption">{channelDisplay}</Typography>
    <ArrowDropDownIcon />
  </IconButton>
  <Box sx={{backgroundColor: backgroundColor, width: "calc(100% - 64px)"}}>
    {encContent}
  </Box>
</Box>

3. 可视化视图（Visualization View）

可视化视图实时展示图表效果，并提供交互控制功能：

可视化视图支持图表类型切换、缩放和数据详情查看

可视化视图的核心实现位于 src/views/VisualizationView.tsx，支持多种图表类型和交互方式：

• 图表类型切换（折线图、柱状图、散点图等）
• 缩放和平移控制
• 数据悬停详情
• 图表导出功能

// 图表渲染核心代码 [src/views/VisualizationView.tsx]
let assembledChart = assembleVegaChart(
  chart.chartType, 
  chart.encodingMap, 
  conceptShelfItems, 
  visTableRows, 
  Math.min(config.defaultChartWidth * 2 / 20, 48), 
  true
);

embed('#' + id, { ...assembledChart }, { actions: true, renderer: "svg" })

实操案例：三步创建销售数据可视化

步骤1：加载数据

1. 点击"Examples"按钮选择示例数据集
2. 或通过"file"按钮上传本地CSV/Excel文件
3. 或使用"clipboard"粘贴表格数据

Data Formulator支持多种数据源，包括本地文件、数据库和云存储，具体实现位于 py-src/data_formulator/data_loader/。

步骤2：配置可视化编码

1. 从概念库拖拽"日期"字段到x轴编码框
2. 拖拽"销售额"字段到y轴编码框
3. 拖拽"产品类别"字段到颜色编码框
4. 在编码配置中选择聚合方式为"求和"

通过拖拽完成销售额按产品类别的时间序列可视化配置

步骤3：优化与导出

1. 在可视化视图调整图表大小和比例
2. 使用"Sort By"选项按销售额降序排列
3. 点击"Save"按钮保存图表配置
4. 通过右上角菜单导出为PNG或SVG格式

// 图表保存功能实现 [src/views/VisualizationView.tsx]
<IconButton size="large" key="save-btn" sx={{ textTransform: "none" }}
  onClick={() => {
    dispatch(dfActions.saveUnsaveChart(focusedChart.id));
  }}>
  <Tooltip title="save a copy">
    <StarBorderIcon  />
  </Tooltip>
</IconButton>

AI增强功能

Data Formulator最强大的特性是AI驱动的数据转换，通过自然语言描述即可实现复杂数据处理：

1. 在编码架子底部的输入框输入转换需求（如"计算每月增长率"）
2. 点击"Formulate"按钮触发AI处理
3. 系统自动生成转换代码并创建新字段
4. 新字段出现在概念库中，可直接用于可视化

AI数据转换功能自动生成所需字段并添加到概念库

AI功能的实现位于 py-src/data_formulator/agents/，支持Python和SQL两种转换方式。

高级功能与扩展

数据锚定（Anchoring）

数据锚定功能允许你将中间结果固定，基于此进行后续分析，避免重复计算和混淆：

// 数据锚定功能实现 [src/app/dfSlice.tsx]
case 'anchorTable': {
  const { tableId } = action.payload;
  return {
    ...state,
    tables: state.tables.map(table => 
      table.id === tableId ? { ...table, anchored: true } : table
    )
  };
}

多表关联（Table Joining）

支持同时加载多个数据集并进行关联分析，通过简单配置实现表连接：

多表关联功能支持基于共同字段合并多个数据集

总结与展望

Data Formulator的拖拽式编码架子彻底改变了数据可视化的创建方式，通过直观的界面和强大的AI支持，让每个人都能轻松创建专业的数据可视化。无论是业务分析师、研究人员还是学生，都能快速将数据转化为洞察。

未来版本将进一步增强AI能力，支持更复杂的数据模型和可视化类型，同时提供更丰富的导出和协作功能。

立即尝试Data Formulator，体验零代码数据可视化的魅力！

---

如果你觉得这篇教程有帮助，请点赞收藏关注三连，下期将带来《Data Formulator高级技巧：自定义AI数据转换函数》。

项目地址：https://gitcode.com/GitHub_Trending/da/data-formulator