Chart

Chart 类，是使用 G2 进行绘图的入口。

构造函数

• new Chart(chartCfg): Chart

参数:

构造函数入参 chartCfg 是一个对象，可配置的属性如下：

返回值: Chart

属性

获取方式：chart.destroyed。

destroyed

• destroyed: boolean = false

标识 chart 对象是否已销毁。

ele

• ele: HTMLElement

Chart 的 DOM 容器。

geometries

• geometries: Geometry[] = []

所有的 geometry 实例。

height

• height: number

图表高度。

interactions

• interactions: Record‹string, Interaction›

所有的 Interaction 实例。

views

• views: View[] = []

所有的子 view。

方法

data

▸ data(data): View

装载数据源。

view.data([{ city: '杭州', sale: 100 }, { city: '上海', sale: 110 } ]);

参数:

返回值: View

source

chart.data() 方法的别名。

coordinate

▸ coordinate(option): CoordinateController

坐标系配置。

example

chart.coordinate({
  type: 'polar',
  cfg: {
    radius: 0.85,
  },
  actions: [
    [ 'transpose' ],
  ],
});

参数:

option 是一个对象，可配置的属性如下：

返回值: CoordinateController

▸ coordinate(type, coordinateCfg): CoordinateController

声明坐标系类型，并进行配置。

// 直角坐标系，并进行转置变换
view.coordinate('rect').transpose();
// 默认创建直角坐标系
view.coordinate();

参数:

返回值: CoordinateController

坐标系变换操作：

view.coordinate().transpose().scale(1, 1).rotate(Math.PI * 0.4).reflect('x' | 'y' | 'xy');

coord

chart.coordinate() 方法别名。

animate

▸ animate(status): View

参数:

返回值: View

axis

▸ axis(status): View

开启或者关闭坐标轴。

 view.axis(false); // 不展示坐标轴

参数:

返回值: View

▸ axis(field, axisOption): View

对特定的某条坐标轴进行配置。

example

view.axis('city', false); // 不展示 'city' 字段对应的坐标轴
// 将 'city' 字段对应的坐标轴的标题隐藏
view.axis('city', {
  title: null,
});

参数:

• axisOption 是一个对象，支持的属性配置如下：

{
  /**
   * 适用于直角坐标系，设置坐标轴的位置。
   */
  position?: 'top' | 'bottom' | 'right' | 'left';
  /**
   * 坐标轴线的配置项，null 表示不展示。
   */
  line?: {
    style?: ShapeAttrs; // 坐标轴线的配置项
   } | null;
  /**
   * 坐标轴刻度线线的配置项，null 表示不展示。
   */
  tickLine?: {
    style?: ShapeAttrs;  // 坐标轴刻度线的样式配置项
    alignTick?: boolean; // 是否同 tick 对齐
    length?: number;     // 长度
  }| null;
  /**
   * 坐标轴子刻度线的配置项，null 表示不展示。
   */
  subTickLine?: {
    style?: ShapeAttrs; // 坐标轴刻度线的样式配置项
    count?: number; // 子刻度个数
    length?: number; // 子刻度线长度
  } | null;
  /**
   * 标题的配置项，null 表示不展示。
   */
  title?: {
    offset?: number; // 标题距离坐标轴的距离
        position: 'center', // 标题的位置 start, center, end
    style?: ShapeAttrs; // 标题文本配置项
    autoRotate?: boolean; // 是否自动旋转
  }| null;
  /**
   * 文本标签的配置项，null 表示不展示。
   */
  label?: {
    style?: ShapeAttrs; // 坐标轴文本的样式
    offset?: number; // label 的偏移量
    rotate?: number; // 文本旋转角度
    formatter?: (text: string, item: ListItem, index: number) => any; // 格式化函数
    autoRotate?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string; // 是否自动旋转，默认 true
    autoHide?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string; // 是否自动隐藏，默认 false
    autoEllipsis?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string; // 是否自动省略，默认 false
  } | null;
  /** 坐标轴网格线的配置项，null 表示不展示。 */
  grid?: {
    /**
     * 线的样式。
     */
    line?: {
      type?: string; // 栅格线的类型，'line' 或者 'circle'
      style?: ShapeAttrs; // 栅格线的样式配置项
    };
    /**
     * 两个栅格线间的填充色。
     */
    alternateColor?: string | string[];
    /**
     * 对于 circle 是否关闭 grid。
     */
    closed?: boolean;
    /**
     * 是否同刻度线对齐，如果值为 false，则会显示在两个刻度中间。
     */
    alignTick?: boolean;
  } | null;
  /** 动画开关，默认开启。 */
  animate?: boolean;
  /** 动画参数配置。 */
  animateOption?: {
    /** 初入场动画配置 */
    appear?: {
      /** 动画执行时间 */
      duration?: number;
      /** 动画缓动函数 */
      easing?: string;
      /** 动画延迟时间 */
      delay?: number;
    };
    /** 更新动画配置 */
    update?: {
      /** 动画执行时间 */
      duration?: number;
      /** 动画缓动函数 */
      easing?: string;
      /** 动画延迟时间 */
      delay?: number;
    };
    /** 更新后新入场的动画配置 */
    enter?: {
      /** 动画执行时间 */
      duration?: number;
      /** 动画缓动函数 */
      easing?: string;
      /** 动画延迟时间 */
      delay?: number;
    };
    /** 离场动画配置 */
    leave?: {
      /** 动画执行时间 */
      duration?: number;
      /** 动画缓动函数 */
      easing?: string;
      /** 动画延迟时间 */
      delay?: number;
    };
  };
  /** 标记坐标轴 label 的方向，左侧为 1，右侧为 -1。 */
  verticalFactor?: number;
  /**
   * 配置坐标轴垂直方向的最大限制长度，对文本自适应有很大影响。
   * 1. 可以直接设置像素值，如 100；
   * 2. 也可设置绝对值，如 0.2，如果是 x 轴，则相对于图表的高度，如果是 y 轴，则相对于图表的宽度
   *
   * 在 G2 中，x 轴的文本默认最大高度为图表高度的 1/2，y 轴的文本默认最大长度为图表宽度的 1/3
   */
  verticalLimitLength?: number;
}

返回值: View

annotation

annotation().(cfg)
辅助标记配置。

view.annotation().line({
  start: ['min', 85],
  end: ['max', 85],
  style: {
    stroke: '#595959',
    lineWidth: 1,
    lineDash: [3, 3],
  },
});

cfg 是一个对象，根据不同的 Annotation 类型对应不同的配置属性。

通用配置

• animate? : boolean

是否进行动画。

• animateOption? : object

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。是一个对象，支持的属性如下：

{
  /** 初入场动画配置 */
  appear?: {
    /** 动画执行时间 */
    duration?: number;
    /** 动画缓动函数 */
    easing?: string;
    /** 动画延迟时间 */
    delay?: number;
  };
  /** 更新动画配置 */
  update?: {
    /** 动画执行时间 */
    duration?: number;
    /** 动画缓动函数 */
    easing?: string;
    /** 动画延迟时间 */
    delay?: number;
  };
  /** 更新后新入场的动画配置 */
  enter?: {
    /** 动画执行时间 */
    duration?: number;
    /** 动画缓动函数 */
    easing?: string;
    /** 动画延迟时间 */
    delay?: number;
  };
  /** 离场动画配置 */
  leave?: {
    /** 动画执行时间 */
    duration?: number;
    /** 动画缓动函数 */
    easing?: string;
    /** 动画延迟时间 */
    delay?: number;
  };
}

• offsetX? : number

x 方向的偏移量。

• offsetY? : number

y 方向的偏移量。

• style? : object

图形样式属性。

• top? : boolean

指定 annotation 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

位置属性配置

Annotation 为位置定位支持三种类型配置：

1. object: 使用图表 x, y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
2. array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
   a. 对应数据源中的原始数据；
   b. 关键字：’min’、’max’、’median’、’start’、’end’ 分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束；
   c. x, y 都是百分比的形式，如 30%，在绘图区域定位(即坐标系内)

说明 a 和 b 两种类型的数据可以混用，但是使用百分比形式时 x 和 y 必须都是百分比形式。

1. function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

chart.annotation().line({
  start(xScales, yScales) {
    return []; // 位置信息
  }
});

▸ annotation().line()

绘制辅助线。

说明： 以下只列出 Line 类型特有的配置项，其余通用配置项见上述。

chart.annotation().line({
  /** 起始位置，详见位置属性配置 */
  start: AnnotationPosition,
  /** 结束位置，详见位置属性配置 */
  end: AnnotationPosition,
  /** 文本配置定义 */
  text?: {
    /**
     * 文本位置，除了制定 'start', 'center' 和 'end' 外，还可以使用百分比进行定位， 比如 '30%'。
     */
    position: 'start' | 'center' | 'end' | string,
    /** 是否自动旋转 */
    autoRotate?: boolean,
    /** 显示的文本内容 */
    content: string,
    /** 文本的图形样式属性 */
    style?: object,
    /** x 方向的偏移量 */
    offsetX?: number,
    /** y 方向偏移量 */
    offsetY?: number,
  };
});

▸ annotation().text()

绘制辅助文本。

说明： 以下只列出 Text 类型特有的配置项，其余通用配置项见上述。

chart.annotation().text({
  /** Point 定位位置，详见位置属性配置 */
  position: AnnotationPosition,
  /** 显示的文本内容 */
  content: string | number,
  /** 文本的旋转角度，弧度制 */
  rotate?: number,
});

▸ annotation().arc()

绘制辅助弧线，只适用于极坐标。

说明： 以下只列出 Arc 类型特有的配置项，其余通用配置项见上述。

chart.annotation().arc({
  /** 起始位置，详见位置属性配置*/
  start: AnnotationPosition,
  /** 结束位置，详见位置属性配置 */
  end: AnnotationPosition,
});

▸ annotation().image()

绘制辅助图片。

说明： 以下只列出 Image 类型特有的配置项，其余通用配置项见上述。

chart.annotation().image({
  /** 图片路径 */
  src: string,
});

▸ annotation().region()

绘制辅助区域。

说明： 以下只列出 Region 类型特有的配置项，其余通用配置项见上述。

chart.annotation().region({
  /** 起始位置，详见位置属性配置*/
  start: AnnotationPosition,
  /** 结束位置，详见位置属性配置 */
  end: AnnotationPosition,
});

▸ annotation().dataMarker()

绘制辅助数据标注。

说明： 以下只列出 DataMarker 类型特有的配置项，其余通用配置项见上述。

chart.annotation().dataMarker({
  /** Point 定位位置，详见位置属性配置 */
  position: AnnotationPosition,
  /** point 设置 */
  point?: null | {
    style?: object  // 样式
  },
  /** line 设置 */
  line?: null | {
    style?: object, // 样式
    length?: number // 长度
  },
  /** text 设置 */
  text: null | {
    style?: object, // 样式
    content: string // 文本内容
  },
  /** 文本超出绘制区域时，是否自动调节文本方向，默认为 true */
  autoAdjust?: boolean,
  /** 朝向，默认为 upward，可选值为 'upward' 或者 'downward' */
  direction?: 'upward' | 'downward',
});

▸ annotation().dataRegion()

绘制辅助数据标注区间。

说明： 以下只列出 DataRegion 类型特有的配置项，其余通用配置项见上述。

chart.annotation().dataRegion({
  /** 起始位置，详见位置属性配置*/
  start: AnnotationPosition,
  /** 结束位置，详见位置属性配置 */
  end: AnnotationPosition,
  /** line长度，default为 0 */
  lineLength?: number,
  /** 标注区间的配置 */
  region?: null | {
    style?: object // 文本样式
  },
  /** 文本的配置 */
  text?: null | {
    style?: object, // 文本样式
    content: string // 文本内容
  },
});

▸ annotation().regionFilter()

绘制过滤区间。

说明： 以下只列出 RegionFilter 类型特有的配置项，其余通用配置项见上述。

chart.annotation().regionFilter({
  /** 起始位置，详见位置属性配置*/
  start: AnnotationPosition,
  /** 结束位置，详见位置属性配置 */
  end: AnnotationPosition,
  /** 染色色值 */
  color: string;
  /* 可选,设定regionFilter只对特定geom类型起作用，如 `apply:['area']` */
  apply?: string[];
});

guide

chart.annotation() 方法的别名。

legend

▸ legend(cfg): View

对图例进行整体配置。

view.legend(false); // 关闭图例
view.legend({
  position: 'right',
}); // 图例进行整体配置

参数:

cfg 是对象类型时，用于对图例进行统一配置（因为 G2 中图表可包含多个图例），cfg 作为对象包含的配置属性如下：

• animate? : boolean

动画开关，默认关闭。

• animateOption? : object

动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。是一个对象，支持的属性如下：

{
  /** 初入场动画配置 */
  appear?: {
    /** 动画执行时间 */
    duration?: number;
    /** 动画缓动函数 */
    easing?: string;
    /** 动画延迟时间 */
    delay?: number;
  };
  /** 更新动画配置 */
  update?: {
    /** 动画执行时间 */
    duration?: number;
    /** 动画缓动函数 */
    easing?: string;
    /** 动画延迟时间 */
    delay?: number;
  };
  /** 更新后新入场的动画配置 */
  enter?: {
    /** 动画执行时间 */
    duration?: number;
    /** 动画缓动函数 */
    easing?: string;
    /** 动画延迟时间 */
    delay?: number;
  };
  /** 离场动画配置 */
  leave?: {
    /** 动画执行时间 */
    duration?: number;
    /** 动画缓动函数 */
    easing?: string;
    /** 动画延迟时间 */
    delay?: number;
  };
}

• background? : object

背景框配置项。

属性结构如下：

{
  padding?: number | number[]; // 背景的留白
  style?: ShapeAttrs;          // 背景样式配置项
}

• custom? : boolean

是否为自定义图例，当该属性为 true 时，需要声明 items 属性。

• flipPage? : boolean

适用于分类图例，当图例项过多时是否进行分页。

• handler? : object

连续图例适用，滑块的配置项。
属性结构如下：

{
  size?: number; // 滑块的大小
  style?: ShapeAttrs; // 滑块的样式设置
}

• itemHeight? : number

分类图例适用，图例的高度，默认为 null。

• itemName? : object

分类图例适用，图例项 name 文本的配置。属性结构如下：

{
  spacing?: number; // 图例项 name 同后面 value 的间距
  formatter?: (text: string, item: ListItem, index: number) => any; // 格式化文本函数
  style?: ShapeAttrs; // 文本配置项
}

• itemSpacing? : number

分类图例适用，控制图例项水平方向的间距。

• itemValue? : object

分类图例适用，图例项 value 附加值的配置项。属性结构如下：

{
  alignRight?: boolean; // 是否右对齐，默认为 false，仅当设置图例项宽度时生效
  formatter?: (text: string, item: ListItem, index: number) => any; // 格式化文本函数
  style?: ShapeAttrs; // 图例项附加值的配置
}

• itemWidth? : number

分类图例适用，图例项的宽度, 默认为 null，自动计算。

• items? : object[]

分类图例适用，用户自己配置图例项的内容。每一项 item 是一个对象，需要包含如下属性：

{
  /**
   * 唯一值，用于动画或者查找
   */
  id?: string;
  /** 名称 */
  name: string;
  /** 值 */
  value: any;
  /** 图形标记 */
  marker?: {
    /**
     * 图例项 marker 同后面 name 的间距
     */
    spacing?: number;
    /**
     * 图例 marker 形状
     */
    symbol?: string | ((x: number, y: number, r: number) => any);
    /**
     * 图例项 marker 的配置项
     */
    style?: ShapeAttrs;
    /** 配置图例 marker 的 symbol 形状。 */
    symbol?: 'circle'
      | 'square'
      | 'diamond'
      | 'triangle'
      | 'triangleDown'
      | 'hexagon'
      | 'bowtie'
      | 'cross'
      | 'tick'
      | 'plus'
      | 'hyphen'
      | 'line' | (x: number, y: number, r: number) => PathCommand;;
  };
}

• label? : object

连续图例适用，文本的配置项。属性结构如下：

{
  // 文本同滑轨的对齐方式，有五种类型
  // rail ： 同滑轨对齐，在滑轨的两端
  // top, bottom: 图例水平布局时有效
  // left, right: 图例垂直布局时有效
  align?: string;
  spacing?: number; // 文本同滑轨的距离
  style?: ShapeAttrs; // 文本样式
}

• layout? : “horizontal” | “vertical”

布局方式： horizontal，vertical

• marker? : object

分类图例适用，图例项的 marker 图标的配置。属性结构如下：

{
    /**
     * 图例项 marker 同后面 name 的间距
     */
    spacing?: number;
    /**
     * 图例 marker 形状
     */
    symbol?: string | ((x: number, y: number, r: number) => any);
    /**
     * 图例项 marker 的配置项
     */
    style?: ShapeAttrs;
    /** 配置图例 marker 的 symbol 形状。 */
    symbol?: 'circle'
      | 'square'
      | 'diamond'
      | 'triangle'
      | 'triangleDown'
      | 'hexagon'
      | 'bowtie'
      | 'cross'
      | 'tick'
      | 'plus'
      | 'hyphen'
      | 'line' | (x: number, y: number, r: number) => PathCommand;;
}

• max? : number

连续图例适用，选择范围的最大值。

• maxHeight? : number

分类图例适用，图例项最大高度设置。

• maxWidth? : number

分类图例适用，图例项最大宽度设置。

• min? : number

连续图例适用，选择范围的最小值。

• offsetX? : number

图例 x 方向的偏移。

• offsetY? : number

图例 y 方向的偏移。

• position? : “top” | “top-left” | “top-right” | “right” | “right-top” | “right-bottom” | “left” | “left-top” | “left-bottom” | “bottom” | “bottom-left” | “bottom-right”

图例的位置。

• rail? : object

连续图例适用，图例滑轨（背景）的样式配置项。属性结构如下：

{
  type?: string; // rail 的类型，color, size
  size?: number; // 滑轨的宽度
  defaultLength?: number; // 滑轨的默认长度，，当限制了 maxWidth,maxHeight 时，不会使用这个属性会自动计算长度
  style?: ShapeAttrs; // 滑轨的样式
}

• reversed? : boolean

分类图例适用，是否将图例项逆序展示。

• slidable? : boolean

连续图例适用，滑块是否可以滑动。

• title? : object

图例标题配置，默认不展示。属性结构如下：

{
  spacing?: number;    // 标题同图例项的间距
  style?: ShapeAttrs;  // 文本样式配置项
}

• track? : object

连续图例适用，选择范围的色块样式配置项。属性结构如下：

{
  style?: ShapeAttrs; // 选定范围的样式
}

• value? : number[]

连续图例适用，选择的值。

▸ legend(field: string, legendOption): View

对 field 字段对应的图例进行配置。

example

view.legend('city', false); // 关闭某个图例，通过数据字段名进行关联
// 对特定的图例进行配置
view.legend('city', {
  position: 'right',
});

参数:

scale

▸ scale(cfg): View

批量设置 scale 配置。

view.scale({
  sale: {
    min: 0,
    max: 100,
  }
});

参数:

cfg 是一个对象，可支持的属性如下：

• type? : string

声明度量类型：’linear’ | ‘cat’ | ‘category’ | ‘identity’ | ‘log’ | ‘pow’ | ‘time’ | ‘timeCat’ | ‘quantize’ | ‘quantile’。

• key? : boolean

用于声明使用数据记录中的哪些字段来组成一条数据的唯一 id（如有多个字段，则使用 ‘-‘ 连接）。
数据 id 用于标识 Element 图形元素，应用于 Geometry 中的图形元素 Element 更新。
默认 G2 内部会有一套 ID 生成规则，如果不能满足用户需求，用户既可以使用该属性配置 id。

example

下面的例子中，声明了将 ‘x’ 和 ‘y’ 字段的数值来作为每条数据记录的 id，即下面数据两条数据的 id 分别为：’1-23’ 和 ‘2-2’。

const data = [
  { x: 1, y: 23, z: 'a' },
  { x: 2, y: 2, z: 'b' },
];
chart.scale({
  x: { key: true },
  y: { key: true },
});

• showLast? : boolean

只对 type: ‘time’ 的 scale 生效，强制显示最后的日期 tick。

• sync? : boolean | string

同步 scale。

example

chart.scale({
  x: { sync: true },
  y: { sync: true },
  x1: { sync: 'x1' },
  x2: { sync: 'x1' },
});

通过以上配置，我们会分别对 x 和 y 两个字段，x1 和 x2 两个字段进行同步度量操作。

• field? : string

对应的字段属性名。

• values? : any[]

输入域、定义域。

• min? : any

定义域的最小值，d3为domain，ggplot2为limits，分类型下无效。

• max? : any

定义域的最大值，分类型下无效。

• minLimit? : any

严格模式下的定义域最小值，设置后会强制 ticks 从最小值开始。

• maxLimit? : any

严格模式下的定义域最大值，设置后会强制 ticks 已最大值结束。

• alias? : string

数据字段的显示别名，scale内部不感知，外部注入。

• range? : [number, number]

输出域、值域，默认值为[0, 1]。

• base? : number

Log有效，底数。

• exponent? : number

Pow有效，指数。

• nice? : boolean

自动调整min、max 。

• ticks? : any[]

用于指定tick，优先级最高。

• tickInterval? : number

tick间隔，只对分类型和时间型适用，优先级高于tickCount。

• minTickInterval? : number

tick最小间隔，只对线型适用。

• tickCount? : number

tick个数，默认值为5。

• maxTickCount? : number

ticks最大值，默认值为10。

• formatter? : (v: any, k?: number) => any;

tick格式化函数，会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示。

• tickMethod? : string | TickMethod

计算 ticks 的算法。

• mask? : string

时间度量 time, timeCat 时有效。

说明：不同类型的 Scale 支持的配置不同，详见 Scale。

返回值: View

▸ scale(field: string, scaleOption): View

为 field 对应的数据字段进行 scale 配置。

view.scale('sale', {
  min: 0,
  max: 100,
});

参数:

tooltip

▸ tooltip(cfg): View

tooltip 提示信息配置。

view.tooltip(false); // 关闭 tooltip
view.tooltip({
  shared: true
});

参数:

cfg 是一个对象，可配置的属性如下：

• container? : string | HTMLElement

自定义 tooltip 的容器。

• containerTpl? : string

用于指定图例容器的模板，自定义模板时必须包含各个 dom 节点的 class。

• crosshairs? : object

配置 tooltip 的 crosshairs，当且仅当 showCrosshairs 为 true 时生效。是一个对象，可配置属性如下：

• domStyles? : object

传入各个 dom 的样式。

{
  'g2-tooltip'?: LooseObject;
  'g2-tooltip-title'?: LooseObject;
  'g2-tooltip-list'?: LooseObject;
  'g2-tooltip-list-item'?: LooseObject;
  'g2-tooltip-marker'?: LooseObject;
  'g2-tooltip-value'?: LooseObject;
  'g2-tooltip-name'?: LooseObject;
}

• enterable? : boolean

tooltip 是否允许鼠标滑入，默认为 false，不允许

• follow? : boolean

设置 tooltip 内容框是否跟随鼠标移动。
默认为 true，跟随鼠标移动，false 则固定位置不随鼠标移动。

• itemTpl? : string

每项记录的默认模板，自定义模板时必须包含各个 dom 节点的 class。

• marker? : object

tooltipMarker 的样式配置。

• offset? : number

tooltip 偏移量。

• position? : “top” | “bottom” | “left” | “right”

设置 tooltip 的固定展示位置，相对于数据点。

• shared? : boolean

true 表示合并当前点对应的所有数据并展示，false 表示只展示离当前点最逼近的数据内容。

• showContent? : boolean

是否展示 tooltip 内容框。

• showCrosshairs? : boolean

是否展示 crosshairs。

• showMarkers? : boolean

是否渲染 tooltipMarkers。

• showTitle? : boolean

是否展示 tooltip 标题。

• title? : string

设置 tooltip 的标题内容：如果值为数据字段名，则会展示数据中对应该字段的数值，如果数据中不存在该字段，则直接展示 title 值。

createView

▸ createView(cfg): View

创建子 view。

const innerView = view.createView({
  region: {
    start: { x: 0, y: 0 },
    end: { x: 0.5, y: 0.5 },
  },
  padding: 8,
});

参数:

cfg 是一个对象，需要配置的属性如下：

• region? : object

view 的绘制范围。

{
  start: { x: number, y: number };
  end: { x: number, y: number };
}

view

chart.createView() 方法别名。

facet

▸ facet‹T›(type, cfg): View

view 分面绘制。

view.facet('rect', {
  rowField: 'province',
  columnField: 'category',
  eachView: (innerView: View, facet?: FacetData) => {
    innerView.line().position('city*sale');
  },
});

参数:

矩形分面

chart.facet('rect', {
  /** view 创建回调。 */
  eachView: (innerView: View, facet?: D) => any;
  /** facet view padding。 */
  padding?: number | number[];
  /** 是否显示标题。 */
  showTitle?: boolean;
  /** facet 数据划分维度。 */
  fields: string[];
  /** 行标题的样式。 */
  columnTitle?: {
    /** x 方向偏移。 */
    offsetX?: number;
    /** y 方向偏移。 */
    offsetY?: number;
    /** 文本样式。 */
    style?: object;
  };
  /** 列标题的样式。 */
  rowTitle?: {
    /** x 方向偏移。 */
    offsetX?: number;
    /** y 方向偏移。 */
    offsetY?: number;
    /** 文本样式。 */
    style?: object;
  };
});

镜像分面

chart.facet('mirror', {
  /** view 创建回调。 */
  eachView: (innerView: View, facet?: D) => any;
  /** facet view padding。 */
  padding?: number | number[];
  /** 是否显示标题。 */
  showTitle?: boolean;
  /** facet 数据划分维度。 */
  fields: string[];
  /** 是否转置。 */
  transpose?: boolean;
  /** 标题样式。 */
  title?:{
    /** x 方向偏移。 */
    offsetX?: number;
    /** y 方向偏移。 */
    offsetY?: number;
    /** 文本样式。 */
    style?: object;
  };
});

list 分面

chart.facet('list', {
  /** 指定每行可显示分面的个数，超出时会自动换行。 */
  cols?: number;
  /** 标题样式。 */
  title?:{
    /** x 方向偏移。 */
    offsetX?: number;
    /** y 方向偏移。 */
    offsetY?: number;
    /** 文本样式。 */
    style?: object;
  };
  /** view 创建回调。 */
  eachView: (innerView: View, facet?: D) => any;
  /** facet view padding。 */
  padding?: number | number[];
  /** 是否显示标题。 */
  showTitle?: boolean;
  /** facet 数据划分维度。 */
  fields: string[];
});

matrix 分面

chart.facet('matrix', {
  /** 行标题的样式。 */
  columnTitle?: {
    /** x 方向偏移。 */
    offsetX?: number;
    /** y 方向偏移。 */
    offsetY?: number;
    /** 文本样式。 */
    style?: object;
  };
  /** 列标题的样式。 */
  rowTitle?: {
    /** x 方向偏移。 */
    offsetX?: number;
    /** y 方向偏移。 */
    offsetY?: number;
    /** 文本样式。 */
    style?: object;
  };
  /** view 创建回调。 */
  eachView: (innerView: View, facet?: D) => any;
  /** facet view padding。 */
  padding?: number | number[];
  /** 是否显示标题。 */
  showTitle?: boolean;
  /** facet 数据划分维度。 */
  fields: string[];
});

circle 分面

chart.facet('circle', {
  /** 分面标题配置。 */
  title?: {
    /** x 方向偏移。 */
    offsetX?: number;
    /** y 方向偏移。 */
    offsetY?: number;
    /** 文本样式。 */
    style?: object;
  };
  /** view 创建回调。 */
  eachView: (innerView: View, facet?: D) => any;
  /** facet view padding。 */
  padding?: number | number[];
  /** 是否显示标题。 */
  showTitle?: boolean;
  /** facet 数据划分维度。 */
  fields: string[];
});

tree 分面

chart.facet('tree', {
  /** 分面标题配置。 */
  title?: {
    /** x 方向偏移。 */
    offsetX?: number;
    /** y 方向偏移。 */
    offsetY?: number;
    /** 文本样式。 */
    style?: object;
  };
  /** 边的配置 */
  line?: {
    style?: ShapeAttrs;
    smooth?: boolean;
  };
  /** view 创建回调。 */
  eachView: (innerView: View, facet?: D) => any;
  /** facet view padding。 */
  padding?: number | number[];
  /** 是否显示标题。 */
  showTitle?: boolean;
  /** facet 数据划分维度。 */
  fields: string[];
});

返回值: View

interaction

▸ interaction(name, cfg): View

view.interaction('my-interaction', { extra: 'hello world' });

详细文档可以参考：https://g2.antv.vision/zh/docs/manual/tutorial/interaction

参数:

返回值: View

filter

▸ filter(field, condition): View

设置数据筛选规则。

view.filter('city', (value: any, datum: Datum) => value !== '杭州');
// 删除 'city' 字段对应的筛选规则。
view.filter('city', null);

参数:

返回值: View

changeData

▸ changeData(data): Chart

修改数据，数据更新逻辑，数据更新仅仅影响当前这一层的 Chart。

chart.changeData([{ city: '北京', sale: '200' }]);

参数:

返回值: Chart

changeSize

▸ changeSize(width, height): Chart

改变图表大小，同时重新渲染。

参数:

返回值: Chart

changeVisible

▸ changeVisible(visible): Chart

显示或隐藏图表。

参数:

返回值: Chart

forceFit

▸ forceFit(): void

自动根据容器大小 resize 画布。

返回值: void

getCanvas

▸ getCanvas(): ICanvas

获取 G.Canvas 实例。

返回值: ICanvas G.Canvas 画布实例。

getCoordinate

▸ getCoordinate(): Coordinate‹›

获取当前坐标系实例。

返回值: Coordinate‹›

getLayer

▸ getLayer(layer): IGroup

获得绘制的层级 group。

参数:

返回值: IGroup 对应层级的 Group。

getOptions

▸ getOptions(): Options

返回所有配置信息。

返回值: Options 所有的 view API 配置。

getSnapRecords

▸ getSnapRecords(point): object[]

获取逼近的点的数据集合。

参数:

返回值: object[]

getTheme

▸ getTheme(): object

获取当前 view 的主题配置。

返回值: object

getTooltipItems

▸ getTooltipItems(point): object[]

获取当前 point 对应的 tooltip 数据项。

参数:

返回值: object[]

getXScale

▸ getXScale(): Scale

获得 x 轴字段的 scale 实例。

返回值: Scale

getXY

▸ getXY(data): object

获取该数据在可视化后，对应的画布坐标点。

参数:

返回值: object 对应的画布坐标点。

getYScales

▸ getYScales(): Scale[]

获取 y 轴字段的 scales 实例。

返回值: Scale[]

view 中 Geometry 对于的 y scale 数组。

show

▸ show(): void

显示图表。

hide

▸ hide(): void

隐藏。

返回值: void

option

▸ option(name, opt): View

往 view.options 属性中存储配置项。

参数:

返回值: View

render

▸ render(isUpdate: boolean): void

生命周期：渲染流程，渲染过程需要处理数据更新的情况。
render 函数仅仅会处理 view 和子 view。

参数:

返回值: void

clear

▸ clear(): void

生命周期：清空图表上所有的绘制内容，但是不销毁图表，chart 仍可使用。

返回值: void

destroy

▸ destroy(): void

销毁图表，同时解绑事件，销毁创建的 G.Canvas 实例。

返回值: void

removeInteraction

▸ removeInteraction(name): void

移除当前 View 的 interaction。

view.removeInteraction('my-interaction');

参数:

返回值: void

removeView

▸ removeView(view): View

删除一个子 view

参数:

返回值: View

返回值: void

showTooltip

▸ showTooltip(point): View

显示 point 坐标点对应的 tooltip。

参数:

返回值: View

hideTooltip

▸ hideTooltip(): View

隐藏 tooltip。

返回值: View

theme

▸ theme(theme): View

设置主题。

view.theme('dark'); // 'dark' 需要事先通过 `registerTheme()` 接口注册完成
view.theme({ defaultColor: 'red' });

参数:

返回值: View

isTooltipLocked

▸ isTooltipLocked(): boolean

是否锁定 tooltip。

返回值: boolean

lockTooltip

▸ lockTooltip(): View

将 tooltip 锁定到当前位置不能移动。

返回值: View

unlockTooltip

▸ unlockTooltip(): View

将 tooltip 锁定解除。

返回值: View

updateOptions

▸ updateOptions(options): View

更新配置项，用于配置项式声明。

参数:

返回值: View

interval

▸ interval( cfg): Interval

创建 Interval 几何标记。
**

line

▸ line(cfg): Line

创建 Line 几何标记。

path

▸ path(cfg): Path

创建 Path 几何标记。

point

▸ point(cfg: Point

创建 Point 几何标记。

polygon

▸ polygon(cfg): Polygon

创建 Polygon 几何标记。

schema

▸ schema(cfg): Schema

创建 Schema 几何标记。

area

▸ area(cfg): Area

创建 Area 几何标记。**

edge

▸ edge(cfg): Edge

创建 Edge 几何标记。**

heatmap

▸ heatmap(cfg): Heatmap

创建 Heatmap 几何标记。
**