项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

AI 生成 ​

让图表从数据与一句话需求里长出来:粘贴表格数据,引擎自动识别列类型(时间 / 数值 / 类目)、选择图表类型、映射字段并渲染;描述里带「趋势 / 占比 / 排行 / 堆叠 / 关系」等意图词时按意图选型,留空则按数据形状推断。年份列(1970 这类裸年份,或数值型年份配「年份 / year」表头)自动认作时间维度;多个度量之间量级悬殊(峰值相差百倍以上)时自动切双轴——大度量柱走左轴、其余线走右轴,小度量不再被压成贴地直线。三维同一条路径可达:明确要三维或数据天然三维(三个数值列无类目维度)时产出三维 Spec。要接自己的大模型?buildChartPrompt() 产出标准提示词,模型返回的 JSON 过一遍 lintChartSpec() 自检修正,setSpec() 回放即得图。

数据直生 ​

下面是一个可编辑的完整闭环:改表格或改描述,点「生成图表」——列推断、选型理由与自检结论全部可见。

· 识别到 3 个数值列、0 个时间列、1 个类目列;意图「trend」

· 折线图:维度有序(时间/类目),看走势与多系列对比

· 叙述注解 2 处(峰值 callout / 末点环比 delta)

查看生成的 Spec
{
  "title": "渠道月度销售额",
  "type": "line",
  "labels": [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月"
  ],
  "series": [
    {
      "name": "线上商城",
      "data": [
        320,
        356,
        401,
        388,
        520,
        560
      ]
    },
    {
      "name": "线下门店",
      "data": [
        280,
        302,
        346,
        331,
        352,
        428
      ]
    },
    {
      "name": "社群团购",
      "data": [
        120,
        98,
        131,
        145,
        167,
        183
      ]
    }
  ],
  "legend": {
    "show": true
  },
  "annotations": [
    {
      "type": "callout",
      "x": "6月",
      "y": 560,
      "series": "线上商城",
      "label": "峰值 560",
      "anchor": "top-right"
    },
    {
      "type": "delta",
      "x": "6月",
      "y": 560,
      "series": "线上商城",
      "direction": "up",
      "text": "环比 +8%"
    }
  ]
}

setSpec() 是整体替换:每点一次「生成图表」就是换一张图,图例、缩放、焦点等交互态一并重置。

三维生成 ​

二维能讲清的数据不会硬上三维。两种情况进三维选型:描述里明确要「三维 / 立体 / 3D」,或数据天然三维——三个数值列且没有类目维度(二维散点必丢一维)。三个数值列恰好构成完整网格(前两列取值的组合覆盖全部行)时产出 surface3d 高度场,稀疏三元组则是 scatter3d;带类目或时间维度时按意图映射 bar3d 柱林 / line3d 空间折线 / pie3d 三维饼,维度不足则告警并回退二维。lintChartSpec() 遇到 *3d 图型会自动切三维契约校验。

· 识别到 3 个数值列、0 个时间列、0 个类目列;意图「relation」

· 三维曲面:温度 × 压力 构成 4×2 完整高度场(产率)

· 三维 spec 已过 schema 校验(几何层自检仅覆盖二维图型)

三维图型与相机配置详见三维篇章。

接入大模型 ​

库不做内置模型调用——buildChartPrompt() 把 Schema、数据预览与硬性规则打包成提示词,喂给你自己的模型(在线 API 或私有部署均可),返回的 JSON 自检后回放:

js
import { buildChartPrompt, lintChartSpec } from '@wil-works/evoke-charts'

// 1. 组提示词(含 options JSON Schema、数据预览与硬性规则)
const prompt = buildChartPrompt({ data: tableText, requirement: '近半年各渠道销售额占比' })

// 2. 喂给你的模型,取回 JSON(示意)
const spec = JSON.parse(await myLLM.complete(prompt))

// 3. 自检修正后 setSpec 回放
const { spec: safe, issues } = lintChartSpec(spec)
if (!issues.some((i) => i.level === 'error')) chartRef.value.setSpec(safe)

模型不可用或返回不合格时,generateChartSpec() 的确定性推断就是兜底路径——同一段数据,两条路产出同一份 Spec 契约。要生成三维配置,把 mode 换成 '3d':Schema、few-shot 示例与硬性规则整套切到三维篇章契约(EvChart3d options)。

API ​

AI 生成

参数说明类型默认值
generateChartSpec数据 + 意图 → Spec。返回 { spec, report }:spec 为 null 时 report 说明缘由;report 给出列推断、选型理由与告警。hint 支持意图关键词,narrative: true 自动注入峰值 callout 与末点环比 delta(受三处注解预算约束)。需求带三维/立体/3D 或三个数值列(无类目维度)时产出三维 Spec(surface3d / scatter3d / bar3d / line3d / pie3d)(data, hint?) => { spec, report }—
lintChartSpec渲染自检:schema 校验 → 焦点预算(注解 ≤3)→ 扇区数量 → 类目拥挤自动转横向 → 无头渲染文本越界与相互重叠 → 自定义色板明暗双模式 WCAG 对比度。*3d 图型自动切三维 schema 校验。能修则修,返回 { issues, spec }(修后的副本,原对象不动)(spec, opts?) => { issues, spec }—
buildChartPrompt提示词契约:Schema + 数据预览 + few-shot 示例(examples: false 关闭)+ 需求 + 硬性规则。mode: 3d 时整套切到三维篇章(EvChart3d options + 三维示例与规则)({ data, requirement, extraRules?, examples?, mode? }) => string2d(缺省)
parseDataTableCSV / TSV 文本、对象数组、二维数组 → { headers, rows };首行表头自动识别(input) => table | null—

相关 ​

  • Spec 契约(getSpec / setSpec / validateOptions)
  • 折线图(叙述注解与分幕编排示例)