矩阵树图

阅读时间约 2 分钟

图表容器

width

optional number default: 400

设置图表宽度。

height

optional number default: 400

设置图表高度。

autoFit

optional boolean default: true

图表是否自适应容器宽高。当 autoFit 设置为 true 时,widthheight 的设置将失效。

padding

optional number[] | number | 'auto'

画布的 padding 值,代表图表在上右下左的间距,可以为单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向,或者开启 auto,由底层自动计算间距。

appendPadding

optional number[] | number

额外增加的 appendPadding 值,在 padding 的基础上,设置额外的 padding 数值,可以是单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向。

renderer

optional string default: canvas

设置图表渲染方式为 canvassvg

pixelRatio

optional number default: window.devicePixelRatio

设置图表渲染的像素比,和底层的 devicePixelRatio 含义一致,一般不用设置,除非在页面有整体 scale 的情况下,可以自定义。

limitInPlot

optional boolean

是否对超出坐标系范围的 Geometry 进行剪切。

数据映射

data

required Record<string: array | string>

设置图表数据源。矩阵树图数据源为一个树状结构的对象,如下

const data = {
  name: 'root',
  children: [
    { name: '分类 1', value: 560 },
    { name: '分类 2', value: 500 },
  ],
};

其中,每一层级的数据都需要具备三个属性

  • name
  • value (叶子节点)
  • children (非叶子节点)

嵌套矩形树图中,布局由叶子节点的 value 值决定。

G2 plot 会根据 data 生成以下数据结构:

  • name
  • value
  • path: 当前节点的层级信息(包含当前节点),层级信息由 data(节点元数据),value(节点 value),height(节点高度)
  • children: 当前节点的叶节点信息(仅存在时给出)

其中,你可以在 label(tooltip)的 formatter 函数中获取 path 参数,从而计算占比, 可参见DEMO

colorField

optional string

颜色映射字段名。

图形样式

color

optional string | string[] | Function

指定点的颜色。如没有配置 colorField,指定一个单值即可。对 colorFiled 进行了配置的情况下,即可以指定一系列色值,也可以通过回调函数的方法根据对应数值进行设置。

默认配置:采用 theme 中的色板。

// 设置单一颜色
{
  color: '#a8ddb5'
}
// 设置多色
{
  colorField: 'type', // 部分图表使用 seriesField
  color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
  colorField: 'type', // 部分图表使用 seriesField
  color: ({ type }) => {
    if(type === 'male'){
      return 'red';
    }
    return 'yellow';
  }
}

rectStyle

optional object

矩形图形样式。rectStyle 中的fill会覆盖 color 的配置。rectStyle 可以直接指定,也可以通过 callback 的方式,根据数据指定单独的样式。

默认配置:

细分配置类型功能描述
fillstring填充颜色
strokestring描边颜色
lineWidthnumber线宽
lineDashnumber虚线显示
opacitynumber透明度
fillOpacitynumber填充透明度
strokeOpacitynumber描边透明度
// 直接指定
{
  rectStyle: {
    fill: 'red',
  },
}
// Function
{
  rectStyle: (data) => {
    if (data.value > 10) {
      return {
        fill: 'green',
      }
    }
    return {
      fill: 'red',
    }
  }
}

hierarchyConfig

optional object

层级布局配置,例如 tile等,详细配置参考d3-hierarchy。 默认为 {tile: 'treemapSquarify', ratio: 0.5 * (1 + Math.sqrt(5))} (黄金分割纵横比)

图表组件

tooltip

fields
可选 string[]

指定 tooltip 中显示的字段,默认不同图表有不同的默认字段列表。配合 formatter 配置一起使用,效果更佳。

tooltip: {
  fields: ['x', 'y'],
}
formatter
可选 Function

格式化 tooltip item 内容(暂时不支持多 tooltipItems 的格式化,可以使用 customContent 处理)

tooltip: {
  formatter: (datum: Datum) => {
    return { name: datum.x, value: datum.y + '%' };
  },
}
follow
可选 boolean default: true

设置 tooltip 内容框是否跟随鼠标移动。

enterable
可选 boolean default: false

tooltip 是否允许鼠标滑入。

showTitle
可选 boolean default: false

是否展示 tooltip 标题。

title
可选 string

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

position
可选 top | bottom | left | right

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

shared
可选 boolean

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

showCrosshairs
可选 boolean default: false

是否展示 crosshairs。

crosshairs
可选 object

配置 tooltip 的 crosshairs,当且仅当 showCrosshairs 为 true 时生效。

细分配置项名称类型功能描述
typex | y | xycrosshairs 的类型: x 表示 x 轴上的辅助线,y 表示 y 轴上的辅助项
linelineStyle线的配置项,详细可见 ShapeAttrs
texttextStyle辅助线文本配置,支持回调
textBackgroundtextBackgroundStyle辅助线文本背景配置
followboolean辅助线是否跟随鼠标移动,默认为 false,即定位到数据点

textStyle

属性名类型介绍
fontSizenumber文字大小
fontFamilystring文字字体
fontWeightnumber字体粗细
lineHeightnumber文字的行高
textAlignstring设置文本内容的当前对齐方式, 支持的属性:center | end | left | right | start,默认值为start
fillstring文字的填充色
fillOpacitynumber文字的填充透明度
strokestring文字的描边
lineWidthnumber文字描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber文字的整体透明度
shadowColorstring文字阴影颜色
shadowBlurnumber文字阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距文字的水平距离
shadowOffsetYnumber设置阴影距文字的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码,以 label.style 配置为例:

{
  label: {
    style:{
      fontSize: 80,
      fontWeight: 300,
      textAlign: 'center',
      textBaseline: 'middle',
      shadowColor: 'white',
      shadowBlur: 10,
    }
  }
}

textBackgroundStyle

细分配置项名称类型功能描述
paddingnumber | number[]文本背景周围的留白
styleshapeStyle线的配置项, 详细可见 ShapeAttrs
showMarkers
可选 boolean default: true

是否渲染 tooltipMarkers。

marker
可选 ShapeAttrs

tooltipMarker 的样式配置。

样式配置类型,详细可见: ShapeAttrs

showContent
可选 boolean default: false

是否展示 tooltip 内容框。

container
可选 string|HTMLElement

自定义 tooltip 的容器。

containerTpl
可选 string

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

itemTpl
可选 string

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

domStyles
可选 TooltipDomStyles

传入各个 dom 的样式。

dom-styles
/** Tooltip 内容框的 css 样式定义 */
{
  domStyles: {
    'g2-tooltip'?: CSSProperties;
    'g2-tooltip-title'?: CSSProperties;
    'g2-tooltip-list'?: CSSProperties;
    'g2-tooltip-list-item'?: CSSProperties;
    'g2-tooltip-marker'?: CSSProperties;
    'g2-tooltip-value'?: CSSProperties;
    'g2-tooltip-name'?: CSSProperties;
  }
}
offset
可选 number

tooltip 偏移量。

reversed
optional boolean

是否将 tooltip items 逆序.

showNil
optional boolean

是否显示空值的 tooltip 项

customItems
可选 Function

在 tooltip 渲染之前,对最终的 items 进行自定义处理(比如排序、过滤、格式化等)。

{
  tooltip: {
    customItems: (originalItems: TooltipItem[]) => {
      // process originalItems, 
      return originalItems;
    };
  }
}
customContent
可选 Function

支持自定义模板。

{
  tooltip: {
    customContent: (title, data) => {
      return `<div>${title}</div>`;
    };
  }
}

尝试一下:

annotations

type
required string

标注类型, text | line | image | region | dataMarker | dataRegion | regionFilter | shape | html.

position
required object

标注位置。

  • 第一种,object 使用图表 x, y 对应的原始数据例如:{ time: '2010-01-01', value: 200 };
  • 第二种,数组来配置位置 [ x, y ],根据数组中的值的存在以下几种形式: 1、对应数据源中的原始数据; 2、关键字:'min'、'max'、'median'、'start'、'end' 分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束; 3、x, y 都是百分比的形式,如 30%,在绘图区域定位(即坐标系内)。 1 和 2 两种类型的数据可以混用,但是使用百分比形式时 x 和 y 必须都是百分比形式。
  • 第三种,回调函数,可以动态得确定辅助元素的位置,应用于数据动态更新,辅助元素的位置根据数据变化的场景。
top
optional boolean default: false

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

animate
optional boolean

是否进行动画。

offsetX
optional number

x 方向的偏移量。

offsetY
optional number

y 方向的偏移量。

start
optional Array

起始位置,一般用于 line、region 等。

end
optional Array

结束位置,一般用于 line、region 等。

{
  type: 'line',
  start: ['min', 'median'],
  end: ['max', 'median'],
},
style
optional object

图形样式属性,参考绘图属性。

src
optional string

图片路径,用于 image 中。

content
optional string

文本内容,用于 text 中。

rotate
optional number

文本的旋转角度,弧度制。

maxLength
optional number

文文本的最大长度。

autoEllipsis
optional boolean

超出 maxLength 是否自动省略。

ellipsisPosition
optional head | middle | tail

文本截断的位置。

isVertical
optional boolean

文本在二维坐标系的显示位置,是沿着 x 轴显示 还是沿着 y 轴显示。

background
optional object

文字包围盒样式设置。

参数名类型默认值描述
styleobject-文本背景的样式, 参考绘图属性
paddingnumber | number[]-文本背景周围的留白
color
optional string

染色色值,一般用于 regionFilter。

apply
optional string[]

设定 regionFilter 只对特定 geometry 类型起作用,如 apply: ['area'],一般用于 regionFilter。

autoAdjust
optional boolean

文本超出绘制区域时,是否自动调节文本方向。

direction
optional upward | downward

朝向。

lineLength
optional number

line 长度,用于 dataRegion。

render
optional string

自定义标记的绘制 render 函数,其他 container 为标记绘制的父容器, view 为图形实例, helpers 为辅助函数,其他 parserPosition 可以用来计算数据点对应的坐标位置,用于 shape。

container
optional string | HTMLElement

自定义 HTML 图形标记的容器元素,用于 html

html
optional string | HTMLElement

自定义的图形标记的 HTML 元素,可为 HTML DOM 字符串,或 HTML 元素,或 html 回调函数,用于 html

alignX
optional 'left' | 'middle' | 'right'

DOM 元素在 X 方向的对齐方式,用于 html

alignY
optional left' | 'middle' | 'right'

DOM 元素在 Y 方向的对齐方式,用于 html

图表主题

推荐使用 💄 ThemeSet 在线自定义自己的主题配置。

内置主题

目前默认的内置主要有两套:defaultdark

{
  theme: 'default', // 'dark',
}

主题属性

除了使用内置的 defaultdark 主题之外,还可以通过设置主题属性来修改部分主题内容:

下表列出了组成主题的大配置项上的具体属性:

主题属性类型描述
defaultColorstring主题色
paddingnumbernumber[]
fontFamilystring图表字体
colors10string[]分类颜色色板,分类个数小于 10 时使用
colors20string[]分类颜色色板,分类个数大于 10 时使用
columnWidthRationumber一般柱状图宽度占比,0 - 1 范围数值
maxColumnWidthnumber柱状图最大宽度,像素值
minColumnWidthnumber柱状图最小宽度,像素值
roseWidthRationumber玫瑰图占比,0 - 1 范围数值
multiplePieWidthRationumber多层饼图/环图占比,0 - 1 范围数值
geometriesobject配置每个 Geometry 下每个 shape 的样式,包括默认样式以及各个状态下的样式
componentsobject配置坐标轴,图例,tooltip, annotation 的主题样式
labelsobject配置 Geometry 下 label 的主题样式
innerLabelsobject配置 Geometry 下展示在图形内部的 labels 的主题样式
pieLabelsobject配置饼图 labels 的主题样式

使用方式:

{
  theme: {
    colors10: ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA']
  }
}

主题属性(主题样式表)

除了以上介绍的主题属性之外,还可以传入主题样式表来自定义主题。如果你需要对全局主题进行配置的话,对样式风格进行切换,比如更改颜色、字体大小、边框粗细等

使用方式:

{
  theme: {
    styleSheet: {
      fontFamily: 'Avenir'
    }
  }
}

支持的样式表属性:

属性类型描述
backgroundColorstring背景色
brandColorstring主题色,默认取 10 色分类颜色色板的第一个颜色
paletteQualitative10string分类颜色色板,分类个数小于 10 时使用
paletteQualitative20string分类颜色色板,分类个数大于 10 时使用
paletteSemanticRedstring语义红色
paletteSemanticGreenstring语义绿色
paletteSemanticYellowstring语义黄色
fontFamilystring字体

更新主题

使用方式:

// 示例1:
plot.update({ theme: 'dark' });

// 示例2:
plot.update({ theme: { defaultColor: '#FF6B3B' } })

自定义注册主题

另外,还可以通过 G2 提供了自定义主题机制来定义全新的主题结构,以允许用户切换、定义图表主题。前往 G2 | 自定义主题 查看详情。

🌰 自定义主题 DEMO 示例

图表事件

在 Plot 上通过 on 绑定事件、off 移除绑定事件。

// 绑定事件
plot.on('eventName', callback);
// 绑定事件,只触发一次
plot.once('eventName', callback);
// 移除事件
plot.off('eventName', callback);

组合方式: ${componentName}:${eventName}

// plot 添加点击事件,整个图表区域
plot.on('plot:click', (...args) => {
  console.log(...args);
});

// element 添加点击事件, element 代表图形元素,关于图形元素,请查看:https://g2.antv.vision/zh/docs/manual/concepts/element
plot.on('element:click', (...args) => {
  console.log(...args);
});

// 图例添加点击事件
plot.on('legend-item:click', (...args) => {
  console.log(...args);
});

// 图例名称添加点击事件
plot.on('legend-item-name:click', (...args) => {
  console.log(...args);
});

// 给 tooltip 添加点击事件
plot.on('tooltip:show', (...args) => {
  console.log(...args);
});

plot.on('tooltip:hide', (...args) => {
  console.log(...args);
});

plot.on('tooltip:change', (...args) => {
  console.log(...args);
});

// label 添加点击事件
plot.on('label:click', (...args) => {
  console.log(...args);
});

// mask 添加点击事件
plot.on('mask:click', (...args) => {
  console.log(...args);
});

// axis-label 添加点击事件
plot.on('axis-label:click', (...args) => {
  console.log(...args);
});

// 给 annotation 添加点击事件
plot.on('annotation:click', (...args) => {
  console.log(...args);
});

图表方法

render()

渲染图表。

update()

更新图表配置项,配置覆盖,不会做差异比对。

使用示例:

plot.update({
  ...currentConfig,
  legend: false,
});

图表交互

添加交互

// 开启「鼠标移入图表元素(柱状图的柱子、点图的点等)时触发 active」的交互
interactions: [{ type: 'element-active' }]

// 开启多个交互
interactions: [{ type: 'element-active' }, { type: 'brush' }]

配置交互

通过 cfg 可以对交互行为进行配置,详细参考 G2 | 修改交互的默认交互

// 修改 tooltip 触发事件
interactions: [
  { 
    type: 'tooltip',
    cfg: { start: [{ trigger: 'element:click', action: 'tooltip:show' }] } 
  }
]

移除交互

// 方式1: 关闭 tooltip 交互
interactions: [{ type: 'tooltip', enable: false }]

// 方式2:
plot.chart.removeInteraction('interaction-type');

使用示例:

// 移除 图例筛选 交互
plot.chart.removeInteraction('legend-filter');

图表事件

在 Plot 上通过 on 绑定事件、off 移除绑定事件。

// 绑定事件
plot.on('eventName', callback);
// 绑定事件,只触发一次
plot.once('eventName', callback);
// 移除事件
plot.off('eventName', callback);

组合方式: ${componentName}:${eventName}

// plot 添加点击事件,整个图表区域
plot.on('plot:click', (...args) => {
  console.log(...args);
});

// element 添加点击事件, element 代表图形元素,关于图形元素,请查看:https://g2.antv.vision/zh/docs/manual/concepts/element
plot.on('element:click', (...args) => {
  console.log(...args);
});

// 图例添加点击事件
plot.on('legend-item:click', (...args) => {
  console.log(...args);
});

// 图例名称添加点击事件
plot.on('legend-item-name:click', (...args) => {
  console.log(...args);
});

// 给 tooltip 添加点击事件
plot.on('tooltip:show', (...args) => {
  console.log(...args);
});

plot.on('tooltip:hide', (...args) => {
  console.log(...args);
});

plot.on('tooltip:change', (...args) => {
  console.log(...args);
});

// label 添加点击事件
plot.on('label:click', (...args) => {
  console.log(...args);
});

// mask 添加点击事件
plot.on('mask:click', (...args) => {
  console.log(...args);
});

// axis-label 添加点击事件
plot.on('axis-label:click', (...args) => {
  console.log(...args);
});

// 给 annotation 添加点击事件
plot.on('annotation:click', (...args) => {
  console.log(...args);
});

图表方法

render()

渲染图表。

update()

更新图表配置项,配置覆盖,不会做差异比对。

使用示例:

plot.update({
  ...currentConfig,
  legend: false,
});

图表主题

推荐使用 💄 ThemeSet 在线自定义自己的主题配置。

内置主题

目前默认的内置主要有两套:defaultdark

{
  theme: 'default', // 'dark',
}

主题属性

除了使用内置的 defaultdark 主题之外,还可以通过设置主题属性来修改部分主题内容:

下表列出了组成主题的大配置项上的具体属性:

主题属性类型描述
defaultColorstring主题色
paddingnumbernumber[]
fontFamilystring图表字体
colors10string[]分类颜色色板,分类个数小于 10 时使用
colors20string[]分类颜色色板,分类个数大于 10 时使用
columnWidthRationumber一般柱状图宽度占比,0 - 1 范围数值
maxColumnWidthnumber柱状图最大宽度,像素值
minColumnWidthnumber柱状图最小宽度,像素值
roseWidthRationumber玫瑰图占比,0 - 1 范围数值
multiplePieWidthRationumber多层饼图/环图占比,0 - 1 范围数值
geometriesobject配置每个 Geometry 下每个 shape 的样式,包括默认样式以及各个状态下的样式
componentsobject配置坐标轴,图例,tooltip, annotation 的主题样式
labelsobject配置 Geometry 下 label 的主题样式
innerLabelsobject配置 Geometry 下展示在图形内部的 labels 的主题样式
pieLabelsobject配置饼图 labels 的主题样式

使用方式:

{
  theme: {
    colors10: ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA']
  }
}

主题属性(主题样式表)

除了以上介绍的主题属性之外,还可以传入主题样式表来自定义主题。如果你需要对全局主题进行配置的话,对样式风格进行切换,比如更改颜色、字体大小、边框粗细等

使用方式:

{
  theme: {
    styleSheet: {
      fontFamily: 'Avenir'
    }
  }
}

支持的样式表属性:

属性类型描述
backgroundColorstring背景色
brandColorstring主题色,默认取 10 色分类颜色色板的第一个颜色
paletteQualitative10string分类颜色色板,分类个数小于 10 时使用
paletteQualitative20string分类颜色色板,分类个数大于 10 时使用
paletteSemanticRedstring语义红色
paletteSemanticGreenstring语义绿色
paletteSemanticYellowstring语义黄色
fontFamilystring字体

更新主题

使用方式:

// 示例1:
plot.update({ theme: 'dark' });

// 示例2:
plot.update({ theme: { defaultColor: '#FF6B3B' } })

自定义注册主题

另外,还可以通过 G2 提供了自定义主题机制来定义全新的主题结构,以允许用户切换、定义图表主题。前往 G2 | 自定义主题 查看详情。

🌰 自定义主题 DEMO 示例

图表交互

矩形树图内置了一些交互,列表如下

treemap-drill-down

treemap-drill-down 用于下钻交互,配置该交互后,矩形树图默认显示深度为 1 的节点,点击后下钻。

示例

interactions: [
  {
    type: 'treemap-drill-down',
  },
],

view-zoom

view-zoom 用于放大 view,配置该交互后,canavs 自动识别 zoom 手势,放大或缩小矩形树图

示例

interactions: [
  {
    type: 'view-zoom',
  },
],

drag-move

drag-move 用于拖拽 view,可和 view-zoom 配套使用,查看矩形树图细节

示例

interactions: [
  {
    type: 'drag-move',
  },
],

添加交互

// 开启「鼠标移入图表元素(柱状图的柱子、点图的点等)时触发 active」的交互
interactions: [{ type: 'element-active' }]

// 开启多个交互
interactions: [{ type: 'element-active' }, { type: 'brush' }]

配置交互

通过 cfg 可以对交互行为进行配置,详细参考 G2 | 修改交互的默认交互

// 修改 tooltip 触发事件
interactions: [
  { 
    type: 'tooltip',
    cfg: { start: [{ trigger: 'element:click', action: 'tooltip:show' }] } 
  }
]

移除交互

// 方式1: 关闭 tooltip 交互
interactions: [{ type: 'tooltip', enable: false }]

// 方式2:
plot.chart.removeInteraction('interaction-type');

使用示例:

// 移除 图例筛选 交互
plot.chart.removeInteraction('legend-filter');