导出内容

结构

registerStructure

注册自定义结构，提供结构类型与实现组件后即可在模板中使用。结构类型见 Structure。

function registerStructure(type: string, structure: Structure): void;

registerStructure('list-row', {
  component: ListRow,
  composites: ['list'],
});

getStructure

根据结构类型获取注册的结构配置，未找到时返回 undefined。

function getStructure(type: string): Structure | undefined;

getStructures

返回当前已经注册的结构类型列表。

function getStructures(): string[];

数据项

registerItem

注册自定义数据项组件，传入类型与组件定义。数据项类型见 BaseItemProps 与 Item。

function registerItem<T extends BaseItemProps>(
  type: string,
  item: Item<T>
): void;

registerItem('simple-item', {
  component: SimpleItem,
  composites: ['list'],
});

getItem

按类型获取注册的数据项，未注册时返回 undefined。

function getItem(type: string): Item | undefined;

getItems

返回已注册的数据项类型列表。

function getItems(): string[];

getItemProps

拆分数据项的容器参数与组件参数，便于在结构组件中统一处理。输入输出基于 BaseItemProps。

function getItemProps<T extends BaseItemProps>(
  props: T,
  extKeys?: string[]
): readonly [extProps: T, restProps: Record<string, any>];

字体

registerFont

注册自定义字体，返回记录了编码后 fontFamily 的字体对象。字体结构见 Font。

function registerFont(font: Font): Font;

registerFont({
  fontFamily: 'Alibaba PuHuiTi',
  name: '阿里巴巴普惠体',
  baseUrl: 'https://assets.antv.antgroup.com/AlibabaPuHuiTi-Regular/result.css',
  fontWeight: {regular: 'regular'},
});

部署字体资源详见字体分包部署与使用

getFont

根据字体名获取字体配置，未注册时返回 null。

function getFont(font: string): Font | null;

getFonts

获取所有已注册的字体列表。

function getFonts(): Font[];

setDefaultFont

设置渲染时的默认字体族名称。

function setDefaultFont(font: string): void;

色板

registerPalette

注册一组色板，可为数组或返回色值的函数。色板类型见 Palette。

function registerPalette(name: string, palette: Palette): void;

registerPalette('my-palette', ['#FF356A', '#7BC9FF', '#FFD166']);

getPalette

获取指定名称的色板。

function getPalette(type: string): Palette | undefined;

getPalettes

返回所有已注册的色板集合。

function getPalettes(): Palette[];

getPaletteColor

根据索引从色板中取色，支持直接传入色板或色板名称。

function getPaletteColor(
  args: string | Palette,
  indexes: number[],
  total?: number
): string | undefined;

主题

registerTheme

注册主题配置，主题名可用于后续获取。主题结构见 ThemeConfig。

function registerTheme(name: string, theme: ThemeConfig): void;

registerTheme('dark', {
  colorBg: '#1F1F1F',
  base: {text: {fill: '#fff'}},
});

getTheme

按名称获取主题配置。

function getTheme(name: string): ThemeConfig | undefined;

getThemes

列出当前注册的主题名称。

function getThemes(): string[];

getThemeColors

根据主色、背景色和信息图配置生成一组主题衍生色，返回值见 ThemeColors。

function getThemeColors(
  colors: {colorPrimary?: string; colorBg?: string},
  options?: ParsedInfographicOptions
): ThemeColors;

资源

registerResourceLoader

注册自定义资源加载器，用于处理 type: 'custom' 的资源。签名见 ResourceLoader。

function registerResourceLoader(loader: ResourceLoader): void;

registerResourceLoader(async (config) => {
  if (config.type !== 'custom') return null;
  const svgText = await fetch(config.data).then((res) => res.text());
  return loadSVGResource(svgText);
});

loadSVGResource

将 <svg> 或 <symbol> 字符串解析为可复用的 SVGSymbolElement。

function loadSVGResource(data: string): SVGSymbolElement | null;

模板

registerTemplate

注册模板配置，使用模板类型标识。模板结构见 TemplateOptions。

function registerTemplate(type: string, template: TemplateOptions): void;

registerTemplate('my-template', {
  design: {structure: 'list-row', item: 'simple-item'},
  theme: 'dark',
});

getTemplate

根据模板类型获取模板配置。

function getTemplate(type: string): TemplateOptions | undefined;

getTemplates

列出当前注册的模板类型。

function getTemplates(): string[];

SVG

parseSVG

将 SVG 字符串解析为 DOM 元素，解析失败会抛出异常。

function parseSVG<T extends SVGElement = SVGSVGElement>(svg: string): T | null;