Mix Plot

4 min read

Plot Container

width

optional number default: 400

Set the width of the chart.

height

optional number default: 400

Set the height of the chart.

autoFit

optional boolean default: true

Whether the chart automatically adjusts to fit the container. If it is set to true, width and height configuration would fail.

padding

optional number[] | number | 'auto'

Set padding value of the canvas. You can also use auto.

appendPadding

optional number[] | number

Extra appendPadding value.

renderer

optional string default: canvas

Set the render way to canvas or svg.

pixelRatio

optional number default: window.devicePixelRatio

Set the pixel ratio of the chart.

limitInPlot

optional boolean

Whether clip the Geometry beyond the coordinate system。

supportCSSTransform

optional boolean

支持 CSS transform,开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。

useDeferredLabel

optional boolean|number

开启后 label 渲染会在浏览器空闲时机执行。可制定具体 number 数值,来限定 timeout 时间 (建议开启时,指定 timeout 时间)

locale

optional string

Specify the locale. There are two built-in locales: 'zh-CN' and 'en-US'. Or you can use G2Plot.registerLocale to register a new locale. Go src/locales/en_US.ts to see the format.

View

syncViewPadding ✨

optional boolean

是否同步子 view 的 padding 配置。传入 boolean 值,含义是:是否需要将子 View 的 padding 同步,如果设置同步,那么可以保证子 View 在 auto padding 的情况下,所有子 View 的图形能够完全重合,避免显示上的错位。

views

optional IView[]

Configuration of views is an array. Every view has its own data, geometries and geometry configuration. see more: IView

plots

可选 IPlot[]

每一个图层的配置,每一个 plot 也是一个图层,都包含自己的:数据、图形、图形配置.

在 2.3.9 版本之后,我们提供了 plots 的配置项,你可以使用 plots 来代替 views 或者联合使用.

IView

IView.region

optional object

The region of view, default is full of region.

Example:

// Set the region of view in the upper part
region: {
  start: { x: 0, y: 0 },
  end: { x: 1, y: 0.5 },
}

IView.data

required array object

Configure the data source. The data source is a collection of objects. For example:

const data = [
  { time: '1991',value: 20 },
  { time: '1992',value: 20 },
];

IView.geometries

optional array object

view 上的图形 geometry 及映射配置,具体见Geometry Configuration

IView.meta

optional object

Configure the meta of each data field of the chart in global, to define the type and presentation of data. Configuration of the meta will affect the text content of all components.

PropertiesTypeDescription
aliasstringalias of the data field
formatterfunctioncallback function to format all values of the data field
valuesstring[]enumerate all the values of the data field
rangenumber[]mapping range of the data field, default: [0,1]

See also the Meta Options to learn more about configuration of meta.

IView.coordinate

Configuration of coordinate, every view has its own coordinate. The geometries of the same view share the same coordinate system.

PropertiesTypeDescription
typestring'polar' | 'theta' | 'rect' | 'cartesian' | 'helix'
cfgCoordinateCfgCoordinateCfg 坐标系配置项,目前常用于极坐标
actionsarray object坐标系的变换配置,具体可以见 G2 坐标系文档
type CoordinateCfg = {
  // 用于极坐标,配置起始弧度。
  startAngle?: number;
  // 用于极坐标,配置结束弧度。
  endAngle?: number;
  // 用于极坐标,配置极坐标半径,0 - 1 范围的数值。
  radius?: number;
  // 用于极坐标,极坐标内半径,0 -1 范围的数值。
  innerRadius?: number;
};
#### IView.axes
optional object | false

view 上的图形坐标轴配置,key 值对应 xFieldyField, value 具体配置见:Axis API

{
  [field]: AxisOptions | false,
}

IView.annotations

optional object[]

Annotations of geometry in view, see more: Annotations API

IView.interactions

optional object[]

Interactions of view, see more: Interactions API

IView.tooltip

optional object

Tooltip of view, see more: Tooltip API

IView.animation

optional object

Animation of view, see more: Animation API

Geometry Configuration

IGeometry.type

required string

Type of geometry, includes: 'line' | 'interval' | 'point' | 'area' | 'polygon'

IGeometry.mapping ✨

required object

Mapping rules of geometry.

在图形语法中,数据可以通过 color, shape, size 等视觉属性映射到图形上,另外 G2/G2Plot 还提供了 styletooltip,让图形展示更多的信息。具体类型定义见下:(其中:ShapeStyle 具体见绘图属性)

type MappingOptions = {
  /** color 映射 */
  readonly color?: ColorAttr;
  /** shape 映射 */
  readonly shape?: ShapeAttr;
  /** 大小映射, 提供回调的方式 */
  readonly size?: SizeAttr;
  /** 样式映射 */
  readonly style?: StyleAttr;
  /** tooltip 映射 */
  readonly tooltip?: TooltipAttr;
}

/** 颜色映射 */
type ColorAttr = string | string[] | ((datum: Datum) => string);
/** 尺寸大小映射 */
type SizeAttr = number | [number, number] | ((datum: Datum) => number);
/** 图形 shape 映射 */
type ShapeAttr = string | string[] | ((datum: Datum) => string);
/** 图形样式 style 映射 */
type StyleAttr = ShapeStyle | ((datum: Datum) => ShapeStyle);
/** tooltip 的回调 */
type TooltipAttr = (datum: Datum) => { name: string; value: string | number };

IGeometry.xField

optional string

对应 x 轴字段。数据映射到几何图形 geometry 上时,最重要的通道是 position 通道。笛卡尔坐标系上的几何图形,通常是一维或二维的,对应位置视觉通道需要 x, y 两个(或一个)字段的值。

IGeometry.yField

optional string

对应 y 轴字段。数据映射到几何图形 geometry 上时,最重要的通道是 position 通道。笛卡尔坐标系上的几何图形,通常是一维或二维的,对应位置视觉通道需要 x, y 两个(或一个)字段的值。

IGeometry.colorField

optional string

The mapping field of color. 通过颜色视觉通道对数据进行分组。

IGeometry.shapeField

optional string

The mapping field of shape. 通过不同的形状对数据进行分组。

IGeometry.sizeField

optional string

The mapping field of size. 通过 size 字段,可以将数据按照 sizeField 对应的数据进行不同的大小映射。

IGeometry.styleField

optional string

The mapping field of style,

IGeometry.tooltipFields

optional string[] | false

The mapping fields of tooltip,

IGeometry.label

optional object

The mapping of label, see more: Label API

IGeometry.adjust

Adjust of data.

The purpose of adjusting data is to make the graphics not obscure each other and to have a clearer understanding of the data, but the correct understanding of the data must be ensured. See more: Adjust | G2

PropertiesTypeDescription
type'stack' | 'dodge' | 'jitter' | 'symmetric'数据调整类型
marginRationumber只对 'dodge' 生效,取 0 到 1 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距
dodgeBystring只对 'dodge' 生效,声明以哪个数据字段为分组依据
reverseOrderboolean只对 'stack' 生效,用于控制是否对数据进行反序操作

IGeometry.state

optional object

Style of different state.

IPlot

IPlot.type

必选 string

plot 支持的类型,目前支持的类型有:line, pie, bar, column, area, gauge, tiny-line, tiny-area, tiny-column, ring-progress, progress, histogram, scatter, funnelstock.

IPlot.top

是否设置在顶层。设置为 true 时,几何图形挂在顶层 chart 对象上,而不是子 view 下。此时 region 设置无效,data 继承顶层 data 配置。

示例

const data = [{ date: '03-01', sales: 100 }, { date: '03-02', sales: 95 }, { date: '03-03', sales: 69 }];
const plot = new Mix('container', {
  data,
  // 共享 slider
  slider: {},
  plots: [
    { type: 'line', options: { xField: 'date', yField: 'sales', color: 'red' } },
    { type: 'column', options: { xField: 'date', yField: 'sales', color: 'date', } },
  ]
});

// 以上写法,等价于 G2 写法
chart.data(data);
chart.line().position('date*sales').color('red');
chart.interval().position('date*sales').color('date');
chart.option('slider', {});

更多见:定制股票图

IPlot.region

optional object

plot 所在图层(view)的布局范围,默认是占满全部。

// 示例:设置 plot 所在图层(view)的布局位置在上半部分
region: {
  start: { x: 0, y: 0 },
  end: { x: 1, y: 0.5 },
}

IPlot.type

required string

plot 类型,通过传入指定 type 的 plot,可以在图层上渲染 G2Plot 内置的图表。

目前开放的图表类型有以下类型:

  • 基础图表'line' | 'pie' | 'column' | 'bar' | 'area' | 'gauge' | 'scatter' | 'histogram' | 'funnel
  • 迷你图表'tiny-line' | 'tiny-column' | 'tiny-area' | 'progress' | 'ring-progress'

IPlot.options

required object[]

plot 的具体配置项。每个 plot 都有自己的图层容器设置(不包括:width, height)以及数据、字段、样式等配置。

具体配置项见指定 plot 的 API 文档. 如:type='column'时,options 对应 ColumnOptions,见文档: Column API

type IPlot =
  | {
      type: 'line';
      options: Omit<LineOptions, 'width' | 'height'>;
    }
  | {
      type: 'pie';
      options: Omit<PieOptions, 'width' | 'height'>;
    }
  | {
      // ... 等等
    };

示例:添加一个图层,引入 column plot 和 bar plot

plots: [
  {
    type: 'column',
    region: { start: { x: 0, y: 0 }, end: { x: 0.48, y: 1 } },
    options: {
      data: [
        { city: '广州', sales: 1024 },
        { city: '杭州', sales: 724 },
        { city: '深圳', sales: 1256 },
      ],
      xField: 'city',
      yField: 'sales',
      seriesField: 'city',
    },
  },
  {
    type: 'bar',
    region: { start: { x: 0.52, y: 0 }, end: { x: 1, y: 1 } },
    options: {
      data: [
        { city: '广州', sales: 1024 },
        { city: '杭州', sales: 724 },
        { city: '深圳', sales: 1256 },
      ],
      yField: 'city',
      xField: 'sales',
      seriesField: 'city',
    },
  },
];

其他

tooltip

顶层 tooltip 配置(在 chart 层配置)。可以让所有图层共享一个 tooltip。

当你设置子图层的 tooltip 时,建议关闭顶层 tooltip。

legend

顶层 legend 配置(统一在 chart 层配置)。