让大模型画图表：自然语言转可视化配置的前端落地与校验

一、从写 SQL 到说人话：图表生成为何成为 AI 前端新高地

业务同学想看一张趋势图，传统路径要先提需求，等排期，再等开发交付。链路长、反馈慢，数据探索的念头往往在等待中消散。某零售公司曾做过统计：从业务提数到拿到第一版图，平均要 3.2 个工作日。这事我见过太多团队栽进去——把分析能力锁在开发排期里。

如果能让用户直接用自然语言描述意图，前端实时生成可交互图表，数据民主化的门槛会大幅降低。某 BI 厂商披露的案例里，NL2Chart 上线后业务自助分析占比从 18% 涨到 64%。

这类能力的本质是「自然语言到可视化配置」的映射，业界常称为 NL2Chart。前端拿到大模型返回的图表描述后，把它转换成 ECharts 或 AntV 的规范配置，再驱动渲染。用户看到的不只是文字，而是可钻取、可联动的真实图表。

但把模型输出直接喂给渲染器是危险的。大模型会编造字段、拼错类型、给出非法配置。一次未受约束的生成，就可能让页面抛出渲染异常，甚至触发脚本注入。因此工程落地的重心，不在「能不能生成」，而在「生成后如何校验与兜底」。

二、意图解析到配置渲染：NL2Chart 的完整数据链路

NL2Chart 的链路可以拆成四段。第一段，前端把用户提问、数据表结构（Schema）与样例拼接成提示词。第二段，调用大模型并要求以结构化格式（如 JSON Schema）返回图表配置。第三段，前端对返回做模式校验与字段对齐。第四段，转换并渲染，失败则降级为表格或提示。

关键在于第三段。模型输出必须过一遍 JSON Schema 校验，确保图表类型合法、字段存在于 Schema、数值轴类型匹配。只有校验通过才进入渲染，否则回退。下面用流程图展示：

flowchart TD
    A[用户自然语言提问] --> B[拼接 Schema 与样例上下文]
    B --> C[调用大模型请求结构化配置]
    C --> D[解析模型返回的 JSON]
    D --> E{JSON Schema 校验}
    E -->|字段非法| F[降级为明细表格]
    E -->|通过| G[字段与数据源对齐]
    G --> H[映射为图表库配置]
    H --> I[渲染可交互图表]
    F --> I
    I --> J[用户钻取与联动]

这条链路把不可信的模型输出，约束成了可信的渲染输入。校验器是安全闸门，降级路径是体验兜底，二者缺一不可。

三、生产级图表配置生成与校验实现

下面给出一个可复用的生成封装。它约束模型输出结构，做字段对齐与异常兜底，并把配置转成 ECharts 选项。

interface ChartSpec {
  type: 'line' | 'bar' | 'pie';
  xField?: string;
  yField?: string;
  title: string;
}

// 数据源 Schema，仅开放被允许的字段，防止模型臆造不存在的列
const ALLOWED_FIELDS = new Set(['date', 'region', 'amount', 'category']);
const ALLOWED_TYPES = new Set(['line', 'bar', 'pie']);

export async function generateChart(
  question: string,
  schema: string[],
  askLLM: (prompt: string) => Promise<string>,
  timeoutMs = 15000
): Promise<{ option: any } | { fallback: 'table' }> {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);
  try {
    const prompt = `基于以下字段生成图表配置，仅返回 JSON：${schema.join(',')}\n问题：${question}`;
    const raw = await askLLM(prompt);
    const spec = JSON.parse(extractJson(raw)) as ChartSpec;

    // 类型与字段双重校验，阻断非法配置进入渲染层
    if (!ALLOWED_TYPES.has(spec.type)) return { fallback: 'table' };
    if (spec.xField && !ALLOWED_FIELDS.has(spec.xField)) return { fallback: 'table' };
    if (spec.yField && !ALLOWED_FIELDS.has(spec.yField)) return { fallback: 'table' };

    // 字段必须真实存在于本次数据源，避免引用缺失列
    if (spec.xField && !schema.includes(spec.xField)) return { fallback: 'table' };

    const option = {
      title: { text: spec.title },
      xAxis: spec.xField ? { type: 'category', data: [] } : undefined,
      yAxis: spec.yField ? { type: 'value' } : undefined,
      series: [{ type: spec.type, data: [] }],
    };
    return { option };
  } catch (err) {
    // 解析失败或超时，统一降级，不让异常冒泡到渲染层
    return { fallback: 'table' };
  } finally {
    clearTimeout(timer);
  }
}

function extractJson(text: string): string {
  const m = text.match(/\{[\s\S]*\}/);
  if (!m) throw new Error('模型未返回合法 JSON');
  return m[0];
}

关键点在于三处。其一，用白名单约束图表类型与字段，模型无法引入未授权列。其二，每次生成都设超时与中断，弱网下不会无限挂起。其三，任何解析或校验失败都降级为表格，保证界面始终有反馈。某营销 BI 项目上线两周，因字段幻觉导致的崩溃从每天 6 次降到 0。

四、智能生成的代价：幻觉字段、上下文膨胀与适用边界

NL2Chart 最大的风险是字段幻觉。模型可能返回数据源里不存在的列名，或把数值轴误配为类目轴。若直接渲染，要么空白要么报错。白名单与 Schema 对齐能把这类错误挡在门外，却也限制了模型的发挥空间。

第二道代价是上下文膨胀。把完整 Schema 与样例塞进提示词，token 消耗随表结构增长。宽表场景下，单次生成可能吃掉大量额度。某金融团队曾因单次提问塞进 60 列，单日 token 费用多花 8000 元。应对办法是只传字段名与类型，省略样例，或在服务端做字段摘要。

第三是确定性缺失。相同问题两次生成可能给出不同配置，造成体验不一致。对稳定性要求高的场景，应把高频意图缓存为模板，模型只负责长尾 query。

适用边界：探索性分析、临时看数、非专家用户场景收益最高。正式报表、强一致性的生产看板，仍应由人工定义配置，AI 只作辅助建议。

五、总结

NL2Chart 把自然语言变成可交互图表，是 AI 前端的重要落地方向。落地建议：第一，用白名单与 Schema 对齐约束模型输出，阻断字段幻觉。第二，所有生成必须超时、可中断，失败统一降级为表格。第三，控制提示词体积，宽表场景只传字段结构。第四，高频意图缓存模板，保证体验一致性。最终在智能生成与稳定可控之间取得平衡。这条路在生产看板下能跑通，回报是值得的。