智能数据平台前端架构：AI 辅助的数据探索与可视化叙事设计

智能数据平台前端架构：AI 辅助的数据探索与可视化叙事设计

一、数据平台的"最后一公里"：从数据看板到叙事洞察

现代数据平台（Metabase、Superset、Looker 的竞品们）在数据查询和图表渲染层面已经高度成熟。但一个尴尬的事实是：企业内部 80% 的数据看板最终无人访问。问题不在数据本身或图表渲染质量，而在于看板"不知道该展示什么"——决策者面对 30 个图表组成的仪表盘，需要在 5 分钟内自行发现异常和趋势，而大多数人没有这种数据解读能力。

AI 在数据平台前端中的最大价值不是"生成更炫的可视化效果"，而是承担两个关键角色：数据探索向导和可视化叙事引擎。前者帮助用户缩小数据探索范围（"这周你关心的指标有 3 个异常"），后者将数据解读为可阅读的故事（"本周营收下降了 12%，主要原因是对比上周减少了 3 个大客户的续费"）。

二、AI 数据平台的三大核心能力

2.1 自动洞察：发现人类注意不到的异常

传统的 BI 看板依赖用户主动查看。自动洞察机制反向推送数据中的关键发现：

• 异常检测：使用统计方法（Z-score、IQR）识别偏离历史趋势的数据点。例如："上周五的订单量比前 4 个周五的平均值低 38%，是过去 90 天的最低值"。
• 趋势检测：使用 Mann-Kendall 检验识别单调趋势。例如："客户激活率在过去 8 周持续下降，下降速度为每周 1.2 个百分点"。
• 相关性发现：计算不同指标间的 Pearson 相关系数，识别出"客户支持工单数量与新用户流失率呈强正相关（r=0.84）"。
• 分段对比：自动将数据按关键维度分段（按地区、按产品线、按用户等级），识别各段的显著差异。

这些洞察应当以"推送"而非"被动展示"的方式呈现——用户在打开数据平台时，首先看到的是"你关注的 5 个指标中，有 2 个出现了值得注意的变化"。

2.2 可视化叙事：将图表转化为故事

传统的仪表盘是图表的集合，叙事化仪表盘是图表的"解释性排列"。核心差异：传统仪表盘的图表之间是平级的，叙事化仪表盘的图表之间存在"因果链"。

叙事生成流程：

2.3 图表自动推荐：从数据到最优可视化

基于数据特征自动选择最合适的图表类型，这是 AI 可视化中最成熟的环节。推荐逻辑基于数据维度和度量：

规则覆盖 80% 的场景。剩余的 20%（多度量混合、非标准维度）交给 LLM 基于数据上下文进行推荐。

三、生产级 AI 数据探索实现

/**
* AI 辅助数据平台前端核心
* 涵盖：自然语言查询、自动洞察、叙事生成、图表推荐
*/

// —- 自然语言查询（NL → SQL） —-

interface NLQueryResult {
sql: string; // 生成的 SQL（用于展示和审核）
data: Record<string, unknown>[]; // 查询结果
chartType: ChartType; // 推荐图表类型
explanation: string; // AI 对查询结果的解读
}

type ChartType = 'line' | 'bar' | 'pie' | 'scatter' | 'heatmap' | 'map' | 'table' | 'number';

class DataExplorer {
/**
* 自然语言到数据探索的完整链路
*/
async explore(query: string): Promise<NLQueryResult> {
// 1. 意图解析 → 查询参数
const intent = await this.parseIntent(query);

// 2. SQL 生成
const sql = await this.generateSQL(intent);

// 3. 执行查询
const data = await this.executeQuery(sql);

// 4. 图表推荐
const chartType = this.recommendChart(intent, data);

// 5. 结果解读
const explanation = await this.explainResults(intent, data);

return { sql, data, chartType, explanation };
}

private async parseIntent(query: string): Promise<QueryIntent> {
const prompt = `将自然语言查询解析为结构化查询意图，返回 JSON：

{
"metrics": ["指标名称"],
"dimensions": ["维度名称"],
"timeRange": "last_7d | last_30d | …",
"filters": [{"field": "字段", "operator": "=|>|<", "value": "值"}],
"orderBy": "字段 ASC/DESC",
"limit": 数字
}

查询："${query}"`;

// 实际调用 LLM API 解析
return { metrics: [], dimensions: [], timeRange: 'last_7d' };
}

private async generateSQL(intent: QueryIntent): Promise<string> {
// Text-to-SQL：将结构化意图转为 SQL
// 需要传入数据库 Schema 作为上下文
return `SELECT … FROM … WHERE …`;
}

private async executeQuery(sql: string): Promise<Record<string, unknown>[]> {
// 通过后端 API 执行 SQL
// 前端不做直接数据库连接
return [];
}

private async explainResults(
intent: QueryIntent,
data: Record<string, unknown>[]
): Promise<string> {
if (data.length === 0) return '查询结果为空，请调整筛选条件。';

const summary = this.computeSummary(data);
const prompt = `基于以下数据摘要，用一句话向产品经理解释结果：

指标：${intent.metrics.join(', ')}
时间范围：${intent.timeRange}
数据量：${data.length} 行
摘要：${JSON.stringify(summary)}

要求：一句话、面向非技术人员、包含关键数字`;

// 实际调用 LLM
return `在过去 7 天中，${intent.metrics[0]}为 ${summary.value}，较上周期 ${summary.trend}。`;
}

private computeSummary(
data: Record<string, unknown>[]
): { value: string; trend: string; max?: string; min?: string } {
// 计算数据的统计摘要
return { value: '–', trend: '–' };
}
}

// —- 图表自动推荐 —-

interface ChartRecommendation {
type: ChartType;
xField: string;
yFields: string[];
confidence: number;
reason: string;
}

class ChartRecommender {
recommend(
metrics: QueryIntent['metrics'],
dimensions: QueryIntent['dimensions'],
data: Record<string, unknown>[]
): ChartRecommendation {
// 数据特征分析
const numDimensions = dimensions.length;
const numMetrics = metrics.length;
const hasTimeDimension = dimensions.some(
(d) => d.toLowerCase().includes('date') || d.toLowerCase().includes('time') || d.toLowerCase().includes('时间')
);
const isSingleValue = data.length <= 1;

// 规则引擎：基于数据特征匹配最佳图表
if (isSingleValue) {
return { type: 'number', xField: '', yFields: metrics, confidence: 1.0, reason: '单值数据最适合大数字展示' };
}

if (numDimensions === 1 && numMetrics === 1 && hasTimeDimension) {
return { type: 'line', xField: dimensions[0], yFields: metrics, confidence: 0.95, reason: '单时序维度适合折线图展示趋势' };
}

if (numDimensions === 1 && numMetrics === 1 && !hasTimeDimension) {
const uniqueValues = new Set(data.map((d) => d[dimensions[0]])).size;
if (uniqueValues <= 5) {
return { type: 'pie', xField: dimensions[0], yFields: metrics, confidence: 0.85, reason: '分类数 ≤ 5 适合饼图展示占比' };
}
return { type: 'bar', xField: dimensions[0], yFields: metrics, confidence: 0.9, reason: '分类维度适合柱状图对比' };
}

if (numMetrics >= 2) {
return { type: 'scatter', xField: metrics[0], yFields: [metrics[1]], confidence: 0.8, reason: '双度量适合散点图发现相关性' };
}

if (numDimensions >= 2) {
return { type: 'heatmap', xField: dimensions[0], yFields: [dimensions[1]], confidence: 0.75, reason: '多维度适合热力图展示交叉分布' };
}

// 默认降级到表格
return { type: 'table', xField: '', yFields: […dimensions, …metrics], confidence: 0.5, reason: '无法匹配最佳图表，使用表格展示' };
}
}

// —- 自动洞察 —-

interface Insight {
id: string;
type: 'anomaly' | 'trend' | 'correlation' | 'segment';
title: string;
description: string;
severity: 'info' | 'warning' | 'critical';
relatedMetrics: string[];
chartData?: Record<string, unknown>[];
chartType?: ChartType;
}

class AutoInsightEngine {
/**
* 对时序数据执行自动洞察分析
*/
analyze(
metricName: string,
timeSeries: Array<{ date: string; value: number }>
): Insight[] {
const insights: Insight[] = [];

if (timeSeries.length < 7) return insights; // 数据太少，无法分析

// 1. 异常检测（Z-score）
const anomalyResults = this.detectAnomalies(timeSeries);
for (const anomaly of anomalyResults) {
insights.push({
id: `anomaly-${metricName}-${anomaly.date}`,
type: 'anomaly',
title: `${metricName} 异常`,
description: `${anomaly.date} 的值为 ${anomaly.value}，偏离正常范围 ${anomaly.expectedRange}（Z-score: ${anomaly.zScore.toFixed(2)}）`,
severity: Math.abs(anomaly.zScore) > 3 ? 'critical' : 'warning',
relatedMetrics: [metricName],
});
}

// 2. 趋势检测（简单线性回归）
const trend = this.detectTrend(timeSeries);
if (trend.significant) {
insights.push({
id: `trend-${metricName}`,
type: 'trend',
title: `${metricName} ${trend.direction}趋势`,
description: `在过去 ${timeSeries.length} 周中，${metricName} 每周${trend.direction === '上升' ? '增长' : '下降'}约 ${trend.slope.toFixed(1)}，${trend.significance}`,
severity: trend.slopePercent > 5 ? 'warning' : 'info',
relatedMetrics: [metricName],
});
}

return insights;
}

private detectAnomalies(
timeSeries: Array<{ date: string; value: number }>
): Array<{ date: string; value: number; zScore: number; expectedRange: string }> {
const values = timeSeries.map((d) => d.value);
const mean = values.reduce((a, b) => a + b, 0) / values.length;
const std = Math.sqrt(
values.reduce((sum, v) => sum + (v – mean) ** 2, 0) / values.length
);

if (std === 0) return []; // 所有值相同，无异常

const anomalies: Array<{ date: string; value: number; zScore: number; expectedRange: string }> = [];
for (const point of timeSeries) {
const zScore = Math.abs((point.value – mean) / std);
if (zScore > 2) {
anomalies.push({
date: point.date,
value: point.value,
zScore,
expectedRange: `[${(mean – 2 * std).toFixed(0)}, ${(mean + 2 * std).toFixed(0)}]`,
});
}
}
return anomalies;
}

private detectTrend(
timeSeries: Array<{ date: string; value: number }>
): { slope: number; slopePercent: number; direction: string; significant: boolean; significance: string } {
const n = timeSeries.length;

// 简单线性回归：y = a + bx
let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
for (let i = 0; i < n; i++) {
sumX += i;
sumY += timeSeries[i].value;
sumXY += i * timeSeries[i].value;
sumXX += i * i;
}

const slope = (n * sumXY – sumX * sumY) / (n * sumXX – sumX * sumX);
const intercept = (sumY – slope * sumX) / n;

// R² 计算（拟合优度）
const meanY = sumY / n;
let ssRes = 0, ssTot = 0;
for (let i = 0; i < n; i++) {
const predicted = intercept + slope * i;
ssRes += (timeSeries[i].value – predicted) ** 2;
ssTot += (timeSeries[i].value – meanY) ** 2;
}
const rSquared = ssTot > 0 ? 1 – ssRes / ssTot : 0;

const slopePercent = ((slope * n) / Math.abs(meanY)) * 100;
const significant = rSquared > 0.5;
const direction = slope > 0 ? '上升' : '下降';

return {
slope: Math.abs(slope),
slopePercent: Math.abs(slopePercent),
direction,
significant,
significance: significant
? `趋势显著（R²=${rSquared.toFixed(2)}）`
: `趋势不显著（R²=${rSquared.toFixed(2)}）`,
};
}
}

// —- 可视化叙事引擎 —-

interface NarrativeBlock {
type: 'heading' | 'text' | 'chart' | 'insight-card';
content: string;
chartConfig?: {
data: Record<string, unknown>[];
chartType: ChartType;
xField: string;
yFields: string[];
};
highlight?: string; // 高亮文字对应的图表数据点
}

class NarrativeEngine {
/**
* 生成数据叙事报告
* 输入一堆洞察，输出有逻辑链的叙事化报告
*/
generate(insights: Insight[]): NarrativeBlock[] {
const narrative: NarrativeBlock[] = [];

// 按严重程度排序：critical → warning → info
const sorted = […insights].sort((a, b) => {
const severityMap = { critical: 3, warning: 2, info: 1 };
return severityMap[b.severity] – severityMap[a.severity];
});

// 开篇标题
narrative.push({
type: 'heading',
content: sorted.length > 0
? `发现 ${sorted.length} 个关键洞察`
: '数据概览',
});

// 摘要段落
if (sorted.length > 0) {
const criticalCount = sorted.filter((i) => i.severity === 'critical').length;
const warningCount = sorted.filter((i) => i.severity === 'warning').length;
narrative.push({
type: 'text',
content: `在过去一周中，系统检测到 ${criticalCount} 个严重问题和 ${warningCount} 个潜在风险。以下是按影响程度排列的详细分析。`,
});
}

// 逐个洞察的叙事卡片
for (const insight of sorted) {
narrative.push({
type: 'insight-card',
content: `${insight.title}\\n\\n${insight.description}`,
// 关联图表（如果有相关数据）
chartConfig: insight.chartData
? {
data: insight.chartData,
chartType: insight.chartType ?? 'line',
xField: 'date',
yFields: insight.relatedMetrics,
}
: undefined,
highlight: insight.title,
});
}

// 结尾：行动建议
if (sorted.length > 0) {
narrative.push({
type: 'text',
content: '建议优先处理标记为"严重"的洞察项。如需查看完整数据，可以点击每个洞察卡片进行深入分析。',
});
}

return narrative;
}
}

// —- 交互式探索 —-

interface DrillPath {
label: string; // 如 "按地区拆分"
dimension: string;
currentFilter: Record<string, string>; // 当前筛选条件
}

class InteractiveExplorer {
/**
* 为图表数据点生成可下钻的路径
*/
getDrillPaths(
dataPoint: Record<string, unknown>,
availableDimensions: string[]
): DrillPath[] {
return availableDimensions
.filter((dim) => dim in dataPoint)
.map((dim) => ({
label: `按 ${dim} 拆分`,
dimension: dim,
currentFilter: { [dim]: String(dataPoint[dim]) },
}));
}

/**
* 执行下钻操作
*/
async drillDown(
drillPath: DrillPath,
currentQuery: QueryIntent
): Promise<NLQueryResult> {
// 在下钻维度上添加筛选条件，并添加新维度
const newQuery: QueryIntent = {
…currentQuery,
filters: [
…(currentQuery.filters ?? []),
{ field: drillPath.dimension, operator: '=', value: drillPath.currentFilter[drillPath.dimension] },
],
dimensions: […currentQuery.dimensions, drillPath.dimension],
};

const explorer = new DataExplorer();
return explorer.explore(JSON.stringify(newQuery));
}
}

interface QueryIntent {
metrics: string[];
dimensions: string[];
timeRange: string;
filters?: Array<{ field: string; operator: string; value: string }>;
orderBy?: string;
limit?: number;
}

export {
DataExplorer,
ChartRecommender,
AutoInsightEngine,
NarrativeEngine,
InteractiveExplorer,
};
export type {
NLQueryResult,
ChartType,
ChartRecommendation,
Insight,
NarrativeBlock,
DrillPath,
QueryIntent,
};

四、数据叙述的边界与信任建设

4.1 AI 生成的叙事不等于真理

自动洞察和叙事生成的本质是"基于统计规则的推理"，而非"确定性的因果分析"。AI 可以说"客户支持工单数量与新用户流失率呈强正相关"，但不能说"工单数量增加导致了流失率上升"——这是典型的"相关性不等于因果性"陷阱。

在 UI 设计中，AI 生成的洞察必须明确区分"事实陈述"和"推测解释"：

• 事实：上周五订单量低于平均值 38%（Z-score: -3.2）——这是可验证的统计事实。
• 推测：可能原因是支付网关故障——这是基于已知模式的推断，需要标注为"AI 推测"。

两者在 UI 上应有视觉区分（推测用斜体 + 信息图标 + "AI 推测"标签）。

4.2 数据探索的"黑箱"信任问题

自然语言查询（"上周销售为什么跌了？"）在生成 SQL 时可能产生语义偏差——"销售"在数据库中可能对应多个表（订单、发票、退款），LLM 选错了表就会得到完全错误的结果。

降低黑箱风险的策略：

4.3 可视化复杂度与可读性的平衡

AI 推荐的"最优图表"有时恰恰是用户不理解的——一个为统计专家设计的箱线图对市场经理来说完全不可读。图表推荐应考虑"用户图表素养"因素——如果用户的历史行为显示他们只看折线图和柱状图，不要突然推荐热力图或散点图。初次推荐新图表类型时，应附带 30 字以内的使用说明。

五、总结

AI 数据平台的核心价值不在数据处理的深度（这是后端和数据库的职责），而在于降低了"从数据到决策"的时间成本和认知成本。自动洞察消灭了"看板无人看"的尴尬，可视化叙事解决了"看了也看不懂"的困境，自然语言查询打破了"不会写 SQL 就没法查"的门槛。

这三个能力应逐步上线：先做图表自动推荐（风险最低、用户可忽略），再做自动洞察（需要数据积累、需要用户信任建设），最后做自然语言查询（最复杂、最容易出问题、但也最能体现产品价值）。每个能力上线时，都应提供"关闭 AI 功能"的开关——让用户感知到 AI 是可选辅助而非强制替代，这是 AI 产品信任建设的基石。数据平台的成功不在于 AI 多么智能，而在于用户基于 AI 的洞察做出了多好的决策。