inline

概述

G2 的数据源来源有两种，一种是 inline，即直接传入具体的数据，这种是 G2 默认的数据源类型；另外一种数据源类型是 fetch，即从远程接口获取数据。

使用方式

显式的指定 type 为 inline，完整的写法如下：

chart.options({
  type: 'view',
  data: {
    type: 'inline',
    value: [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 },
    ],
  },
});

当数据是数组且无需配置数据转换时，可以简写为如下：

chart.options({
  type: 'view',
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
});

开始使用

举一个例子如下：

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
  encode: {
    x: 'genre',
    y: 'sold',
  },
});

chart.render();

配置项

这个数据源比较简单，相当于传入的数据，直接作为数据源进行 transform 处理加工，然后走渲染逻辑。

将远程示例改为本地数据

data 的对象形式会被当作连接器配置读取。把 fetch 的结果放到本地变量后，应改为 { type: 'inline', value: localData }；不能把树根对象或 { nodes, links } 直接赋给 data。数组且无转换时才使用上面的简写。

const graphData = {
  nodes: [{ id: 'A' }, { id: 'B' }],
  links: [{ source: 'A', target: 'B' }],
};

chart.options({
  type: 'forceGraph',
  data: { type: 'inline', value: graphData },
  encode: { nodeColor: 'id' },
});

inline 只负责传入数据，不会把对象自动转成表格。内部结构仍需符合目标标记的要求，例如关系图的节点和边、层级图的树结构。替换 fetch 时，保留仍适用于新数据的 data.transform，并检查字段名和数据层级。

普通标记的 data 不接收 (previousData) => nextData 这样的任意函数。先计算数组，或在 data.transform 中配置 custom 转换。视图数据的继承规则见数据配置层级。