Chart

    创建 Chart 的方式如下：

    创建一个 chart 实例，返回一个 Chart 对象，建议在单个容器上只初始化一个 Chart 实例。

    对应图表的 DOM 容器，可以传入该 dom 的 id 或者直接传入容器的 html 节点对象。

    1. <div id="c1"></div>
    1. const chart = new G2.Chart({
    2.   container: document.getElementById('c1'),
    3.   width: 1000,
    4.   height: 500
    5. });

    width

    指定图表的宽度，单位为 'px'，当 forceFit: true 时宽度配置不生效。

    height

    指定图表的高度，单位为 'px'。

    padding

    设置图表的内边距，支持如下几种设置方式：

    • padding: [ 20, 30, 20, 30]
    • padding: 20
    • padding: { top: 20, right: 30, bottom: 20, left: 30 }
    • padding: 'auto'
    • padding: [20, 'auto', 30, 'auto']
    • 另外也支持设置百分比，如 padding: [ '20%', '30%' ]，该百分比相对于整个图表的宽高。
    • padding 为数字以及数组类型时使用方法同 CSS 盒模型。
    • padding 中存在 'auto'，时会自动计算边框，目前仅考虑 axis 和 legend 占用的边框。

      background

    设置图表整体的边框和背景样式，是一个对象，包含如下属性：

    1. background: {
    2.   fill: {string}, // 图表背景色
    3.   fillOpacity: {number}, // 图表背景透明度
    4.   stroke: {string}, // 图表边框颜色
    5.   strokeOpacity: {number}, // 图表边框透明度
    6.   opacity: {number}, // 图表整体透明度
    7.   lineWidth: {number}, // 图表边框粗度
    8.   radius: {number} // 图表圆角大小 
    9. }

    plotBackground

    图表绘图区域的边框和背景样式，是一个对象，包含如下属性：

    1. plotBackground: {
    2.   fill: {string}, // 图表背景色
    3.   fillOpacity: {number}, // 图表背景透明度
    4.   stroke: {string}, // 图表边框颜色
    5.   strokeOpacity: {number}, // 图表边框透明度
    6.   opacity: {number}, // 图表整体透明度
    7.   lineWidth: {number}, // 图表边框粗度
    8.   radius: {number} // 图表圆角大小 
    9. }

    forceFit

    图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度。

    animate

    图表动画开关，默认为 true，即开启动画。

    pixelRatio

    设置设备像素比，默认取浏览器的值 window.devicePixelRatio。

    data

    设置图表的数据源，data 是一个包含 JSON 对象的数组或者 DataSet.View 对象。

    建议使用 chart.source(data) 设置数据源。

    theme

    设置当前图表的主题，可以是字符串 default 或者 dark（这两个是目前 G2 支持的主题），也可以是一个包含主题配置项的对象，具体设置形式参考 。这是“Chart 级别的主题样式配置”。

    renderer

    设置当前图表的使用的渲染方案，可以是字符串 canvas 或者 svg（这两个是目前 G2 支持的渲染引擎）。具体两种渲染引擎的差异可以参考 选择 Canvas 还是 SVG。

    全局指定 renderer 的方法：

    1. G2.Global.renderer = 'svg';

    source

    chart.source(data)

    (data: Array|DataSet.View)

    为 chart 装载数据，返回 chart 对象。

    参数
    • data
      数据源数据，标准的 JSON 数组或者 DataSet.View 对象。

    chart.source(data, scaleConfig)

    (data: Array|DataSet.View, scaleConfig?: object)

    参数

    • data
      数据源数据，标准的 JSON 数组或者 DataSet.View 对象。

    • scaleConfig
      可选，用于数据字段的列定义，如设置数据的类型，显示别名，时间类型的展示格式等，不同的数字类型的配置项不同，详情可配置属性参考 。

    示例
    1. const data = [
    2.   { type: 0, value: 1 },
    3.   { type: 1, value: 2 },
    4.   { type: 2, value: 3 },
    5.   { type: 2, value: 3, color: '#f80' },
    6. ];
    7.  
    8. chart.source(data, {
    9.   type: {
    10.     type: 'cat', // 声明 type 字段为分类类型
    11.     values: [ 'A', 'B', 'C' ] // 重新显示的值
    12.     alias: '类型' // 设置属性的别名
    13.   }
    14. });

    scale

    chart.scale('field', scaleConfig)

    (field: string, scaleConfig: object)

    为指定的数据字段进行列定义，返回 chart 实例。

    !注意: 如数据属性 field 在 chart.source() 和 chart.scale() 中均有定义，那么 chart.scale() 中的配置会覆盖 chart.source() 中的配置。

    参数

    • field
      设置列定义的数据字段名。

    • scaleConfig
      列定义配置，对象类型，可配置的属性如下：

    1. {
    2.   type: {string}, // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow
    3.   alias: {string}, // 数据字段的别名
    4.   formatter: {function}, // 格式化文本内容
    5.   range: {array}, // 输出数据的范围，默认[ 0, 1 ]，格式为 [ min, max ]，min 和 max 均为 0 至 1 范围的数据。
    6.   tickCount: {number}, // 设置坐标轴上刻度点的个数
    7.   ticks: {array}, // 用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示
    8.   sync: {boolean} // 当 chart 存在不同数据源的 view 时，用于统一相同数据属性的值域范围
    9. }

    !注意：除了以上属性外，不同的 type 还对应有各自的可配置属性，详见 Scale 度量 API;

    示例
    1. const data = [
    2.   { x: 0, y: 1 },
    3.   { x: 1, y: 2 },
    4.   { x: 2, y: 3 }
    5. ];
    6.  
    7. // 为 x 字段设置列定义
    8. chart.scale('x', {
    9.   type: 'cat', // 声明 type 字段为分类类型
    10.   values: [ 'A', 'B', 'C' ] // 重新显示的值
    11.   alias: '类型' // 设置属性的别名  
    12. });

    chart.scale(scaleConfig)

    (scaleConfig: object)

    为一个或者多个数据字段进行列定义配置。

    参数
    • scaleConfig
      列定义配置，对象类型，可配置的属性如下：
    1. {
    2.   type: {string}, // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow
    3.   alias: {string}, // 数据字段的别名
    4.   formatter: {function}, // 格式化文本内容
    5.   range: {array}, // 输出数据的范围，默认[ 0, 1 ]，格式为 [ min, max ]，min 和 max 均为 0 至 1 范围的数据。
    6.   tickCount: {number}, // 设置坐标轴上刻度点的个数
    7.   ticks: {array}, // 用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示
    8.   sync: {boolean} // 当 chart 存在不同数据源的 view 时，用于统一相同数据属性的值域范围
    9. }
    示例
    1. const data = [
    2.   { x: 0, y: 1 },
    3.   { x: 1, y: 2 },
    4.   { x: 2, y: 3 }
    5. ];
    6.  
    7. // 为多个字段设置列定义
    8. chart.scale({
    9.   x: {
    10.     type: 'cat', // 声明 type 字段为分类类型
    11.     values: [ 'A', 'B', 'C' ] // 重新显示的值
    12.     alias: '类型' // 设置属性的别名
    13.   },
    14.   y: {
    15.     type: 'cat'
    16.   }
    17. });

    coord

    (type: string, coordConfig ?: object)

    设置坐标系类型，同时允许进行各种坐标系变换，默认为笛卡尔坐标系。

    参数

    • type: string

    坐标系的类型，具体包括：

    • coordConfig: object

    可选配置项，是一个对象类型，仅适用于极坐标类型，包括 polar、theta、helix。

    可配置的属性如下：

    1. chart.coord('polar', {
    2.   radius: 0.5, // 设置半径，值范围为 0 至 1
    3.   innerRadius: 0.3, // 空心圆的半径，值范围为 0 至 1
    4.   startAngle: -1 * Math.PI / 2, // 极坐标的起始角度，单位为弧度
    5.   endAngle: 3 * Math.PI / 2 // 极坐标的结束角度，单位为弧度
    6. });

    坐标系变换

    chart.coord().<action>()

    支持的变换操作如下：

    • rotate(angle): 坐标系旋转，angle 表示旋转的度数，单位为角度。

    • scale(sx, sy): 坐标系缩放，sx 代表 x 方向缩放比例，sy 代表 y 方向缩放比例，单位为数值。

    • reflect('' | 'x' | 'y'): 坐标系转置，将 x 或者 y 的起始、结束值倒置。

    • transpose(): 将坐标系 x 轴和 y 轴转置。

    上述操作均可支持链式调用，如下：

    1. chart.coord().rotate(70).scale(1.5, 1.5).reflect('xy').transpose();

    axis

    坐标轴配置，该方法返回 chart 对象。

    chart.axis(false)

    关闭所有坐标轴。

    chart.axis('field', false)

    不展示 field 字段对应的坐标轴。

    参数
    • field
      数据源中的数据属性名称。

    chart.axis('field', axisConfig)

    (field: string, axisConfig: object)

    为字段 field 对应的坐标轴进行配置。

    1. // 示例：配置 x 对应坐标轴线的颜色
    2. chart.axis('x', {
    3.   line: {
    4.     stroke: '#ff8800'
    5.   }
    6. });
    参数

    • field
      坐标轴对应的数据字段名。

    • axisConfig
      一个对象类型，用于设置坐标轴配置信息，可配置属性如下：

    • position: string
      设置坐标轴的显示位置，可设置的值包含 top、bottom、left、right，即上下左右四个位置。

    • line: object |null
      设置坐标轴线的样式，包括线的颜色、粗细等。如果该属性值为 null 则表示不展示坐标轴线。

    1. line: {
    2.   stroke: {string}, // 坐标轴线的颜色
    3.   strokeOpacity: {number}, // 坐标轴线的透明度，数值范围为 0 - 1
    4.   lineDash: {array}, // 设置虚线的样式，如 [2, 3]第一个用来表示实线的像素，第二个用来表示空白的像素。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值
    5.   lineWidth: {number} // 设置坐标轴线的粗细
    6. }
    • label: object | null
      设置坐标轴文本的样式。如果该属性值为 null 则表示不展示坐标轴文本。
    1. label: {
    2.   offset: {number}, // 数值，设置坐标轴文本 label 距离坐标轴线的距离
    3.   // 设置文本的显示样式，还可以是个回调函数，回调函数的参数为该坐标轴对应字段的数值
    4.   textStyle: {
    5.     textAlign: 'center', // 文本对齐方向，可取值为： start center end
    6.     fill: '#404040', // 文本的颜色
    7.     fontSize: '12', // 文本大小
    8.     fontWeight: 'bold', // 文本粗细
    9.     rotate: 30, 
    10.     textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
    11.   } | (text) => {
    12.     // text: 坐标轴对应字段的数值
    13.   }, 
    14.   autoRotate: {boolean}, // 文本是否需要自动旋转，默认为 true
    15.   /**
    16.    * 用于格式化坐标轴上显示的文本信息的回调函数
    17.    * @param  {string} text  文本值
    18.    * @param  {object} item  该文本值对应的原始数据记录
    19.    * @param  {number} index 索引值
    20.    * @return {string}       返回格式化后的文本值
    21.    */
    22.   formatter(text, item, index) {},
    23.   /**
    24.    * 使用 html 渲染文本
    25.    * @param  {string} text  文本值
    26.    * @param  {object} item  该文本值对应的原始数据记录
    27.    * @param  {number} index 索引值
    28.    * @return {string}       返回 html 字符串
    29.    */
    30.   htmlTemplate(text, item, index) {}
    31. }
    • textStyle 的更详细的配置项
    • title: object | null
      设置坐标轴标题的显示样式。如果该属性值为 null 则表示不展示坐标轴标题。

    在 G2 的默认主题中，坐标轴标题是不展示的。

    通过 title: true 渲染坐标轴标题。通过以下配置对标题进行个性化配置：

    1. title: {
    2.   autoRotate: {boolean}, // 是否需要自动旋转，默认为 true 
    3.   offset: {number}, // 数值，设置坐标轴标题距离坐标轴线的距离
    4.   // 设置标题的文本样式
    5.   textStyle: {
    6.     textAlign: 'center', // 文本对齐方向，可取值为： start middle end
    7.     fill: '#404040', // 文本的颜色
    8.     fontSize: '12', // 文本大小
    9.     fontWeight: 'bold', // 文本粗细
    10.     rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
    11.     textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
    12.   },
    13.   position: 'start' | 'center' | 'end' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
    14. }
    • textStyle 的更详细的配置项 绘图属性
    • tickLine: object | null
      设置坐标轴的刻度线。如果该属性值为 null 则表示不展示。
    1. tickLine: {
    2.   lineWidth: 1, // 刻度线宽
    3.   stroke: '#ccc', // 刻度线的颜色
    4.   strokeOpacity: 0.5, // 刻度线颜色的透明度
    5.   length: 5, // 刻度线的长度，可以为负值（表示反方向渲染）
    6.   alignWithLabel:true//设为负值则显示为category数据类型特有的样式
    7. }
    • alignWithLabel的用法详情见教程
    • subTickCount: number
      设置每两个刻度之间次刻度线的个数，默认为 0，即不展示次刻度线。
    1. subTickCount: 2 // 设置次刻度线的个数，数值类型
    • subTickLine: object
      设置次刻度线的样式，仅当 subTickCount 不为 0 时生效。
    1. subTickLine: {
    2.   lineWidth: 1, // 次刻度线宽
    3.   stroke: '#ddd', // 次刻度线颜色
    4.   strokeOpacity: 0.5, // 次刻度线颜色的透明度
    5.   length: 3 // 次刻度线的长度，可以为负值（表示反方向渲染）
    6. }
    • grid: object | null
      设置坐标轴网格线的样式，网格线与坐标轴线垂直。如果该属性值为 null 则表示不展示。
    1. grid: {
    2.   align: 'center', // 声明网格顶点从两个刻度中间开始，默认从刻度点开始
    3.   type: 'line' | 'polygon', // 声明网格的类型，line 表示线，polygon 表示矩形框
    4.   // 当网格类型 type 为 line 时，使用 lineStyle 设置样式
    5.   lineStyle: {
    6.     stroke: '#d9d9d9', // 网格线的颜色
    7.     lineWidth: 1, // 网格线的粗细
    8.     lineDash: [4, 4 ] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
    9.   },
    10.   alternateColor: '#ccc' | [ '#f80', '#ccc' ], // 当网格类型 type 为 polygon 时，使用 alternateColor 为网格设置交替的颜色，指定一个值则先渲染奇数层，两个值则交替渲染
    11.   hideFirstLine: true | false, // 是否隐藏第一条网格线，默认为 false
    12.   hideLastLine: true | false // 是否隐藏最后一条网格线，默认为 false
    13. }

    配置图表图例。

    chart.legend(false)

    不显示所有的图例。

    chart.legend(field, false)

    不显示 field 字段对应的图例。

    chart.legend(field, legendConfig)

    (field: string|true, legendConfig: object)

    为数据字段 field 对应的图例进行配置，如下所示：

    1. chart.legend('gender', {
    2.   position: 'right'
    3. });
    参数

    • field: string | true
      图例对应的字段名。如果值为 true，表示该配置对所有的图例生效。

    • legendConfig: object
      是一个对象，该对象可配置的属性如下：

    • position: string
      设置图例的显示位置，可设置的值为12个：left-top,left-center,left-bottom,right-top,,right-bottom,top-left,top-center,top-bottom,bottom-left,bottom-center,bottom-right。也可使用bottom,top,left,right设置位置，此时对应的值分别为bottom-center,top-center,left-bottom,right-bottom。默认为 bottom-center。

    • layout: string
      对分类类型的图例生效，用于设置各个图例项的排列方式，可设置值包括：vertical、horizontal，分别表示垂直和水平排布。

    • title: object | null
      图例标题的显示样式设置，如果值为 null，表示不展示图例标题，默认不展示。

    1. title: {
    2.   textAlign: 'center', // 文本对齐方向，可取值为： start middle end
    3.   fill: '#404040', // 文本的颜色
    4.   fontSize: '12', // 文本大小
    5.   fontWeight: 'bold', // 文本粗细
    6.   rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
    7.   textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
    8. }

    • offsetX: number
      图例 x 方向的偏移值，数值类型，数值单位为 'px'，默认值为 0。

    • offsetY: number
      图例 Y 方向的偏移值，数值类型，数值单位为 'px'，默认值为 0。

    • itemGap: number
      对分类类型的图例生效，表示图例每项之间的间距，如果是水平排布则为左右间距，如果是竖直排布则为上下间距。

    • itemMarginBottom: number
      对分类类型的图例生效，表示各个图例项垂直方向的间距。

    • itemWidth: number
      对分类类型的图例生效，设置图例项的宽度，当图例有很多图例项，并且用户想要这些图例项能垂直对齐时，此时这个属性可帮用户实现此效果。

    ：

    • unCheckColor: string
      对分类类型的图例生效，用于取消选中的图例文本颜色。

    • background: object
      对分类类型的图例生效，用于设置图例的背景样式。

    • allowAllCanceled: boolean
      对分类类型的图例生效，表示是否允许所有图例项被取消选中，默认为 false，即必须保留一个被选中的图例项。

    • itemFormatter: function
      回调函数，用于格式化图例每项的文本显示。

    1. itemFormatter(val) {
    2.   return val; // val 为每个图例项的文本值
    3. }

    • marker: string | function
      对分类类型的图例生效，用于设置图例的 marker 样式，默认按照 geom 的类型显示。

    • 当为 string 类型时，即表示使用 G2 默认提供的类型，支持的类型如下：
      |type|样式
      |——-
      |circle|
      |square|Chart - 图1
      |bowtie|
      |diamond|Chart - 图2
      |hexagon|
      |triangle|Chart - 图3
      |triangle-down|
      |cross|Chart - 图4
      |tick|
      |plus|Chart - 图5
      |hyphen|
      |line|Chart - 图6
      |hollowCircle|
      |hollowSquare|Chart - 图7
      |hollowBowtie|
      |hollowDiamond|Chart - 图8
      |hollowHexagon|
      |hollowTriangle|Chart - 图9
      |hollowTriangle-down|

    • marker 也支持自定义 shape，使用方式如下，
    1. /**
    2.  * 自定义 marker 形状
    3.  * @param  {number} x   该 marker 的横轴坐标
    4.  * @param  {number} y   该 marker 的纵轴坐标
    5.  * @param  {number} r   该 marker 的半径大小
    6.  * @return {null}     
    7.  */
    8. marker(x, y, r) {}

    以下代码绘制了如图所示的 marker：Chart - 图10

    1. marker(x, y, r) {
    2.   return [
    3.     [ 'M', x - r, y ],
    4.     [ 'L', x + r, y ]
    5.   ];
    6. }
    • textStyle: object
      用于设置图例项的文本样式。
    1. textStyle: {
    2.   textAlign: 'center', // 文本对齐方向，可取值为： start middle end
    3.   fill: '#404040', // 文本的颜色
    4.   fontSize: '12', // 文本大小
    5.   fontWeight: 'bold', // 文本粗细
    6.   rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
    7.   textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
    8. }

    • attachLast:boolean
      是否启用尾部跟随图例(tail-legend)，尾部跟随图例自动跟随geom的最后一个数据点，适用的图表类型为line、stackLine、area、stackArea。 默认为false，即不启用。

    • clickable: boolean
      对分类类型的图例生效，设置图例项是否允许点击，默认为 true，即允许点击。

    • hoverable: boolean
      对分类类型的图例生效，设置是否开启鼠标 hover 至图例的交互效果，默认为 true，即开启动画。

    • selectedMode: string
      针对分类类型图例，当 clickable 为 true 时该配置项生效，用于设置图例的选中交互模式，可配置的属性:

    • selectedMode: 'single'：表示开启单选模式；

    • selectedMode: 'multiple'：表示开启多选模式，默认为 multiple。
    • onHover: function
      针对分类类型的图例，用于自定义鼠标 hover 图例项的交互，当 hoverable 为 false 不生效。
    1.  * 自定义图例项鼠标 hover 事件，hoverable 为 false 不生效
    2.  * @param  {object} ev 事件对象
    3.  * @return {null}    
    4.  */
    5. onHover: ev => {}
    • onClick: function
      针对分类类型的图例，用于自定义鼠标点击图例项的交互，当 clickable 为 false 不生效。
    1. /**
    2.  * 自定义图例项点击事件， clickable 为 false 不生效
    3.  * @param  {object} ev 事件对象
    4.  * @return {null}
    5.  */
    6. onClick: ev => {}

    • useHtml: boolean
      针对分类类型图例，用于开启是否使用 html 渲染图例，默认为 false，true 表示使用 html 渲染图例。

    • container: string
      当 useHtml 为 true 时生效，用于指定生成图例的 dom 容器，那么该值必须为 dom 容器的 id 值为分类类型的话，则支持传入索引值。

    • containerTpl: string
      当 useHtml 为 true 时生效，用于指定图例容器的模板，默认值如下：

    1. containerTpl: '<div class="g2-legend" style="position:absolute;top:20px;right:60px;width:auto;">'
    2.   + '<h4 class="g2-legend-title"></h4>' 
    3.   + '<ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>'
    4.   + '</div>';

    如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。

    • itemTpl: string
      当 useHtml 为 true 时生效，用于指定生成图例的图例项 html 模板，默认值如下：
    1. itemTpl: '<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}" style="cursor: pointer;font-size: 14px;">'
    2.   + '<i class="g2-legend-marker" style="width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:10px;background-color: {color};"></i>'
    3.   + '<span class="g2-legend-text">{value}</span>'
    4.   + '</li>';

    !注意：自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。

    • slidable: boolean
      针对连续图例，用于设置连续图例是否允许滑动，默认为 true，即开启滑动操作。

    • width: number
      针对连续图例，用于设置图例的宽度。

    • height: number
      针对连续图例，用于设置图例的高度。

    • custom: boolean
      默认为 false，当 custom 为 true，表示不使用默认生成的图例，允许用户自定义图例，包括具体的图例项以及 click、hover 交互。

    自定义图例时需要用户自己声明具体的图例项 items(该属性是一个对象数组，数组中每一项为一个对象类型，结构为： { value: '', marker:{fill: 'red'}})以及图例项的 hover 和 click 事件。

    具体使用如下：

    1. // 自定义图例
    2. chart.legend({
    3.   custom: true,
    4.   items: [
    5.     { 
    6.       value: 'waiting', // 图例项的文本内容
    7.       marker: {
    8.         symbol: 'circle',  // 该图例项 marker 的形状，参见 marker 参数的说明
    9.         fill: '#3182bd'  // 该图例项 marker 的填充颜色
    10.       }
    11.     },
    12.     { 
    13.       value: 'call', 
    14.       marker: {
    15.         symbol: 'square',  // 该图例项 marker 的形状，参见 marker 参数的说明
    16.         fill: '#99d8c9'  // 该图例项 marker 的填充颜色
    17.       }
    18.     },
    19.     { 
    20.       value: 'people',
    21.       fill: '#fdae6b', 
    22.       marker: {
    23.         symbol: 'line',  // 该图例项 marker 的形状，参见 marker 参数的说明
    24.         stroke: '#fdae6b',  // 该图例项 marker 的填充颜色
    25.         radius: 6
    26.       }
    27.     }
    28.   ],
    29.   onHover: ev => {}, // 自定义 hover 事件  
    30.   onClick: ev => {}, // 自定义 click 事件
    31. });
    32. // 为特定的字段自定义图例
    33. chart.legend('field', {
    34.   custom: true,
    35.   items: [
    36.     { 
    37.       value: 'waiting', // 图例项的文本内容
    38.       marker: {
    39.         symbol: 'circle',  // 该图例项 marker 的形状，参见 marker 参数的说明
    40.         fill: '#3182bd'  // 该图例项 marker 的填充颜色
    41.       }
    42.     },
    43.     { 
    44.       value: 'call', 
    45.       marker: {
    46.         symbol: 'square',  // 该图例项 marker 的形状，参见 marker 参数的说明
    47.         fill: '#99d8c9'  // 该图例项 marker 的填充颜色
    48.       }
    49.     },
    50.     { 
    51.       value: 'people',
    52.       fill: '#fdae6b', 
    53.       marker: {
    54.         symbol: 'line',  // 该图例项 marker 的形状，参见 marker 参数的说明
    55.         stroke: '#fdae6b',  // 该图例项 marker 的填充颜色
    56.         radius: 6
    57.       }
    58.     }
    59.   ],
    60.   onHover: ev => {}, // 自定义 hover 事件  
    61.   onClick: ev => {}, // 自定义 click 事件
    62. });

    具体示例：

    1. const data = [
    2.   { time: '10:10', call: 4, waiting: 2, people: 2 },
    3.   { time: '10:15', call: 2, waiting: 6, people: 3 },
    4.   { time: '10:20', call: 13, waiting: 2, people: 5 },
    5.   { time: '10:25', call: 9, waiting: 9, people: 1 },
    6.   { time: '10:30', call: 5, waiting: 2, people: 3 },
    7.   { time: '10:35', call: 8, waiting: 2, people: 1 },
    8.   { time: '10:40', call: 13, waiting: 1, people: 2 }
    9. ];
    10. const chart = new G2.Chart({
    11.   container: 'c2',
    12.   forceFit: true,
    13.   height: 400
    14. });
    15. chart.source(data, {
    16.   call: {
    17.     min: 0
    18.   },
    19.   people: {
    20.     min: 0
    21.   },
    22.   waiting: {
    23.     min: 0
    24.   }
    25. });
    26. chart.legend({
    27.   custom: true,
    28.   allowAllCanceled: true,
    29.   items: [
    30.     { value: 'waiting', marker: {symbol: 'square', fill: '#3182bd', radius: 5} }, 
    31.     { value: 'call', marker: {symbol: 'hyphen', stroke: '#99d8c9', radius: 5, lineWidth: 3} }, 
    32.     { value: 'people', marker: {symbol: 'hyphen', stroke: '#fdae6b', radius: 5, lineWidth: 3} }
    33.   ],
    34.   onClick: ev => {
    35.     const item = ev.item;
    36.     const value = item.value;
    37.     const checked = ev.checked;
    38.     const geoms = chart.getAllGeoms();
    39.     for (let i = 0; i < geoms.length; i++) {
    40.       const geom = geoms[i];
    41.       if (geom.getYScale().field === value) {
    42.         if (checked) {
    43.           geom.show();
    44.         } else {
    45.           geom.hide();
    46.         }
    47.       }
    48.     }
    49.   }
    50. });
    51. chart.axis('waiting', false);
    52. chart.axis('call', false);
    53. chart.axis('people', false);
    54. chart.interval()
    55.   .position('time*waiting')
    56.   .color('#3182bd');
    57. chart.line()
    58.   .position('time*call')
    59.   .color('#99d8c9')
    60.   .size(3)
    61.   .shape('smooth');
    62. chart.line()
    63.   .position('time*people')
    64.   .color('#fdae6b')
    65.   .size(3)
    66.   .shape('smooth');
    67. chart.point()
    68.   .position('time*people')
    69.   .color('#fdae6b')
    70.   .size(3)
    71.   .shape('circle');
    72. chart.render();

    图表的 tooltip 配置，G2 图表的 tooltip 使用 html 渲染。

    chart.tooltip(false)

    chart.tooltip(tooltipConfig)

    (tooltipConfig: object)

    配置 tooltip，该方法也可以如下调用：

    1. chart.tooltip(true, {
    2.   showTitle: false,
    3.   inPlot: false
    4. });
    参数

    • tooltipConfig: object
      是一个对象类型，支持的属性如下：

    • triggerOn: string
      tooltip 的触发方式，可配置的值为：'mousemove'、'click'、'none'，默认为 mousemove。

    • 'mousemove': 鼠标移动触发；

    • 'click': 鼠标点击出发；
    • 'none': 不触发 tooltip，用户通过 chart.showTooltip() 和 chart.hideTooltip() 来控制 tooltip 的显示和隐藏。

    • showTitle: boolean
      是否展示提示信息的标题，默认为 true，即展示，通过设置为 false 来隐藏标题。

    • title: string
      设置 tooltip 的标题展示的数据字段，设置该字段后，该标题即会展示该字段对应的数值。showTitle 为 false 时，该设置不生效。

    • crosshairs: object
      是一个对象类型，用于设置 tooltip 的辅助线或者辅助框。

    默认我们为 geom 为 ‘line’, ‘area’, ‘path’, ‘areaStack’ 开启了垂直辅助线；geom 为‘interval’ 默认会展示矩形背景框。如下图所示：

    该属性可支持的配置如下：

    1. crosshairs: {
    2.   type: 'rect' | 'x' | 'y' | 'cross',
    3.   style: {
    4.     // 图形样式
    5.     fill: {string}, // 填充的颜色
    6.     stroke: {string}, // 边框的颜色
    7.     strokeOpacity: {number}, // 边框颜色的透明度，数值为 0 - 1 范围
    8.     fillOpacity: {number}, // 填充的颜色透明度，数值为 0 - 1 范围
    9.     lineWidth: {number}, // 边框的粗细
    10.     lineDash: {number} | {array} // 线的虚线样式
    11.   }
    12. }

    • offset: number
      设置 tooltip 距离鼠标的偏移量。

    • inPlot: boolean
      设置是否将 tooltip 限定在绘图区域内，默认为 true，即限定在绘图区域内。

    • follow: boolean
      设置 tooltip 是否跟随鼠标移动。默认为 true，即跟随。

    • shared: boolean
      设置 tooltip 只展示单条数据。

    • enterable: boolean
      用于控制是否允许鼠标进入 tooltip，默认为 false，即不允许进入。

    • position: string
      该属性设置之后，就会在固定位置展示 tooltip，可设置的值为：left、right、、bottom。

    • hideMarkers: boolean
      对于 line、area、path 这三种几何图形，我们在渲染 tooltip 时会自动渲染 tooltipMarker Chart - 图11，通过声明该属性值为 true 来关闭 tooltipMarker。

    • containerTpl: string
      tooltip 默认的容器模板，默认值如下：

    1. containerTpl: '<div class="g2-tooltip">'
    2.   + '<div class="g2-tooltip-title" style="margin-bottom: 4px;"></div>'
    3.   + '<ul class="g2-tooltip-list"></ul>'
    4.   + '</div>',

    如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。

    • itemTpl: string
      tooltip 每项记录的默认模板，默认值如下：
    1. itemTpl: '<li data-index={index}>'
    2.   + '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>'
    3.   + '{name}: {value}'
    4.   + '</li>'

    如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。

    • g2-tooltip: object
      设置 tooltip 容器的 CSS 样式。

    • g2-tooltip-title: object
      设置 tooltip 标题的 CSS 样式。

    • g2-tooltip-list: object
      设置 tooltip 列表容器的 CSS 样式。

    • g2-tooltip-list-item: object
      设置 tooltip 列表容器中每一项的 CSS 样式。

    • g2-tooltip-marker: object
      设置tooltip 列表容器中每一项 marker 的 CSS 样式。

    除了使用配置上述属性来自定义 tooltip 的样式外，用户也可以直接为 html 定义 CSS 样式。

    guide

    用于绘制图表的辅助元素，该方法的返回值不为 chart 对象，而是一个 guide 对应的控制类。

    chart.guide().line(cfg)

    绘制辅助线。

    1. chart.guide().line({
    2.   top: {boolean}, // 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
    3.   start: {object} | {function} | {array}, // 辅助线起始位置，值为原始数据值，支持 callback
    4.   end: {object} | {function} | {array}, // 辅助线结束位置，值为原始数据值，支持 callback
    5.   lineStyle: {
    6.     stroke: '#999', // 线的颜色
    7.     lineDash: [ 0, 2, 2 ], // 虚线的设置
    8.     lineWidth: 3 // 线的宽度
    9.   }, // 图形样式配置
    10.   text: {
    11.     position: 'start' | 'center' | 'end' | '39%' | 0.5, // 文本的显示位置
    12.     autoRotate: {boolean}, // 是否沿线的角度排布，默认为 true
    13.     style: {object}, // 文本图形样式配置
    14.     content: {string}, // 文本的内容
    15.     offsetX: {number}, // x 方向的偏移量
    16.     offsetY: {number} // y 方向的偏移量
    17.   }
    18. });

    • lineStyle, style 的更详细的配置项 绘图属性

      参数

    • top: boolean
      指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

    • start: object | array | function
      指定辅助线的起始位置，该值的类型如下：

    • object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 }

    • array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：

      • x，y 都是原始数据 [ '2010-01-01', 200 ];
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

    chart.guide().text({
    position(xScale, yScale) {
    return []; // 位置信息
    },
    content: '最大值'
    });

    • end: object | array | function
      指定辅助线的结束位置，使用同 start。

    • lineStyle: object
      用于设置辅助线的显示样式。

    • text: object
      辅助线可以带文本，该属性使用如下：

    1. text: {
    2.   position: 'start' | 'center' | 'end' | '39%' | 0.5, // 文本的显示位置，值除了指定的常量外，还可以是百分比或者小数
    3.   autoRotate: {boolean}, // 指定文本是否沿着线的方向排布，默认为 true，即沿着线排布
    4.   // 设置文本的显示样式
    5.   style: {
    6.     fill: 'red'
    7.   },
    8.   content: {string}, // 文本的内容
    9.   offsetX: {number}, // x 方向的偏移量
    10.   offsetY: {number} // y 方向的偏移量
    11. }
    • style 的更详细的配置项

      chart.guide().text(cfg)

    绘制辅助文本。

    1. chart.guide().text({
    2.   top: {boolean}, // 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
    3.   position: {object} | {function} | {array}, // 文本的起始位置，值为原始数据值，支持 callback
    4.   content: {string}, // 显示的文本内容
    5.   style: {
    6.     fill: '#666', // 文本颜色
    7.     fontSize: '12', // 文本大小
    8.     fontWeight: 'bold' // 文本粗细
    9.     rotate: 30 // 旋转角度
    10.   }, // 文本的图形样式属性
    11.   offsetX: {number}, // x 方向的偏移量
    12.   offsetY: {number} // y 方向偏移量
    13. });

    • style 的更详细的配置项 绘图属性

      参数

    • top: boolean
      指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

    • position: object | array | function
      指定辅助文本的显示位置，该值的类型如下：

    • object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 }

    • array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：

      • x，y 都是原始数据 [ '2010-01-01', 200 ];
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%'] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

    chart.guide().text({
    position(xScale, yScale) {
    return []; // 位置信息
    },
    content: '最大值'
    });

    • content: string
      辅助文本的显示内容。

    • style: object
      用于设置辅助文本的显示样式。 style 的更详细的配置项

    • offsetX: number
      设置辅助文本 x 方向的偏移量。

    • offsetY: number
      设置辅助文本 y 方向的偏移量。

    chart.guide().image(cfg)

    辅助图片。

    1. // 辅助图片 image，只是指定了 start，则该点表示图片左上角坐标
    2. chart.guide().image({
    3.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
    4.   start: {object} | {function} | {array}, // 图片起始位置， 值为原始数据值，支持 callback
    5.   src: {string}, // 图片路径
    6.   width: {number},
    7.   height: {number},
    8.   offsetX: {number}, // x 方向的偏移量
    9.   offsetY: {number} // y 方向偏移量
    10. });
    11. // 辅助图片 image，通过指定 start 和 end 确定图片的位置和宽高
    12. chart.guide().image({
    13.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层 
    14.   start: {array} | {function} | {array}, // 图片起始位置， 值为原始数据值，支持 callback
    15.   end: {array} | {function} | {array}, // 图片结束位置， 值为原始数据值，支持 callback
    16.   src: {string}, // 图片路径
    17.   offsetX: {number}, // x 方向的偏移量
    18.   offsetY: {number} // y 方向偏移量
    19. });
    参数

    • top: boolean
      指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

    • start: object | array | function
      指定辅助图片的起始位置，即图片的左上角，该值的类型如下：

    • object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 }

    • array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：

      • x，y 都是原始数据 [ '2010-01-01', 200 ];
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

    chart.guide().text({
    position(xScale, yScale) {
    return []; // 位置信息
    },
    content: '最大值'
    });

    • end: object | array | function
      可选，指定辅助图片的结束位置，即图片的右下角，该属性用法同 start。当 start 和 end 属性同时声明时，即指定了图片的宽度和高度。

    • src: string
      指定图片的地址，可以是路径，也可以是 base64 编码。

    • width: number
      当仅指定了 start 属性时，用于设置图片的宽度。

    • height: number
      当仅指定了 start 属性时，用于设置图片的高度。

    • offsetX: number
      设置图片 x 方向的偏移量。

    • offsetY: number
      设置图片 y 方向的偏移量。

    chart.guide.region(cfg)

    辅助背景框。

    1. chart.guide().region({
    2.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
    3.   start: {object} | {function} | {array}, // 辅助框起始位置，值为原始数据值，支持 callback 
    4.   end: {object} | {function} | {array},// 辅助框结束位置，值为原始数据值，支持 callback
    5.   style: {
    6.     lineWidth: 0, // 辅助框的边框宽度
    7.     fill: '#f80', // 辅助框填充的颜色
    8.     fillOpacity: 0.1, // 辅助框的背景透明度
    9.     stroke: '#ccc' // 辅助框的边框颜色设置
    10.   } // 辅助框的图形样式属性
    11. });

    • style 的更详细的配置项 绘图属性

      参数

    • top: boolean
      指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

    • start: object | array | function
      指定辅助背景框的起始位置，即背景框的左上角，该值的类型如下：

    • object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 }

    • array: 数组来配置位置 [ x, y]，根据数组中的值的存在以下几种形式：

      • x，y 都是原始数据 [ '2010-01-01', 200 ];
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

    chart.guide().text({
    position(xScale, yScale){
    return []; // 位置信息
    },
    content: '最大值'
    });

    • end: object | array | function
      指定辅助背景框的结束位置，即背景框的右下角，该属性用法同 start。

    • style: object
      用于设置辅助背景框的样式。

    • style 的更详细的配置项

      chart.guide().html(cfg)

    辅助 html。

    1. chart.guide().html({
    2.   position: {object} | {function} | {array}, // html 的中心位置， 值为原始数据值，支持 callback
    3.   alignX: 'left' | 'middle' | 'right',
    4.   alignY: 'top' | 'middle' | 'bottom',
    5.   offsetX: {number},
    6.   offsetY: {number},
    7.   html: {string}, // html 代码
    8.   zIndex: {number}
    9. });
    参数

    • position: object | function | array
      设置 html 的显示位置，该值的类型如下：

    • object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 }

    • array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
      • x，y 都是原始数据 [ '2010-01-01', 200 ];
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景
    1. chart.guide().text({
    2.   position(xScale, yScale) {
    3.     return []; // 位置信息
    4.   },
    5.   content: '最大值'
    6. });

    • alignX: string
      html 的水平对齐方式，可取值为： left、middle、right，默认值为 middle。

    • alignY: string
      html 的垂直对齐方式，可取值为： top、middle、bottom，默认值为 middle。

    • html: string
      需要显示的 html 内容。

    • zIndex: number
      html 层级。

    • offsetX: number
      设置 html 在 x 方向的偏移量。

    • offsetY: number
      设置 html 在 y 方向的偏移量。

    chart.guide().arc(cfg)

    辅助圆弧。

    1. chart.guide().arc({
    2.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
    3.   start: {object} | {function} | {array}, // 辅助框起始位置，值为原始数据值，支持 callback 
    4.   end: {object} | {function} | {array},// 辅助框结束位置，值为原始数据值，支持 callback
    5.   style: {object} // 图形样式属性
    6. });

    • style 的更详细的配置项 绘图属性

      参数

    • top: boolean
      指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

    • start: object | array | function
      指定辅助圆弧的起始位置，该值的类型如下：

    • object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 }

    • array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：

      • x，y 都是原始数据 [ '2010-01-01', 200 ];
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

    chart.guide().text({
    position(xScale, yScale) {
    return []; // 位置信息
    },
    content: '最大值'
    });

    • end: object | array | function
      指定辅助圆弧的结束位置，该属性用法同 start。

    • style: object
      设置圆弧的显示样式。

    • style 的更详细的配置项

      chart.guide().regionFilter(cfg)

    辅助区域过滤，将图表中位于矩形选区中的图形元素提取出来，重新着色。

    参数

    • top: boolean
      指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

    • start: object | array | function
      指定辅助过滤区域的起始位置，即过滤区域的左上角，该值的类型如下：

    • array: 数组来配置位置 [ x, y]，根据数组中的值的存在以下几种形式：
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

    • end: object | array | function
      指定辅助过滤区域的结束位置，即过滤区域的右下角，该属性用法同 start。

    • color: string
      指定辅助过滤区域内图形元素重新着色的色值。

    • apply: array
      可选,设定regionFilter只对特定geom类型起作用，如apply:['area'],默认regionFilter的作用域为整个图表

    chart.guide().dataMarker(cfg)

    特殊数据标注点，适用于折线图和面积图。

    1. chart.guide().dataMarker({
    2.   top:true | false, // 指定 giude 是否绘制在 canvas 最上层，默认为true, 即绘制在最上层
    3.   position: {object} | {function} | {array}, // 标注点起始位置，值为原始数据值，支持 callback ,
    4.   content: {string}, // 显示的文本内容
    5.   style: {
    6.     text: {object},
    7.     point:{object},
    8.     line:{object}
    9.   },//可选，文本/point/line样式
    10.   display:{
    11.     text:{boolean},
    12.     point:{boolean},
    13.     line:{boolean}
    14.   },//可选，是否显示文本/point/line，默认为全部显示
    15.   lineLength:{number},//可选，line长度，default为30
    16.   direction:'upward' | 'downward' //可选，朝向，默认为upwaard
    17. });
    参数

    • top: boolean
      指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

    • position: object | array | function
      指定特殊数据点标注的位置，该值的类型如下：

    • object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 }

    • array: 数组来配置位置 [ x, y]，根据数组中的值的存在以下几种形式：
      • x，y 都是原始数据 [ '2010-01-01', 200 ];
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

    • content: string
      辅助文本的显示内容。

    • style: object
      style:{ point:{}, line:{}, text:{} }， point/line/text样式，更详细的配置项 绘图属性

    • display: object
      display:{ point:true | false, line:true | false, text:true | false }， 是否显示point/line/text。

    • lineLength: number
      line的长度，default为30。

    • direction: string
      标注点朝向：'upward' | 'downward', default为'upward'，即向上

    chart.guide().dataRegion(cfg)

    特殊数据区间标注，适用于折线图和面积图。

    1. chart.guide().dataRegion({
    2.   top:true | false, // 指定 giude 是否绘制在 canvas 最上层，默认为 true, 即绘制在最上层
    3.   start: {object} | {function} | {array}, // 标注点起始位置，值为原始数据值，支持 callback ,
    4.   end: {object} | {function} | {array}, // 标注点结束位置，值为原始数据值，支持 callback ,
    5.   content: {string}, // 显示的文本内容
    6.   style: {
    7.     text: {object},
    8.     point:{object},
    9.     line:{object}
    10.   },//可选，文本/point/line样式
    11.   display:{
    12.     text:{boolean},
    13.     point:{boolean},
    14.     line:{boolean}
    15.   },//可选，是否显示文本/point/line，默认为全部显示
    16.   lineLength:{number},//可选，line长度，default为30
    17.   direction:'upward' | 'downward' //可选，朝向，默认为upwaard
    18. });
    参数

    • top: boolean
      指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

    • start: object | array | function
      指定特殊数据点标注的起始位置，该值的类型如下：

    • object: 使用图表 x,y 对应的原始数据例如： { time: '2010-01-01', value: 200 }

    • array: 数组来配置位置 [ x, y]，根据数组中的值的存在以下几种形式：
      • x，y 都是原始数据 [ '2010-01-01', 200 ];
      • x，y 可以使用原始数据的替代字符串 'min', 'max', 'median' , 例如：[ 'median', 200 ]
      • x, y 都是用百分比的形式，在绘图区域定位，字符串中存在 '%', 例如 [ '50%', '50%' ] 使得辅助元素居中
    • function: 回调函数，可以动态的确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景

    • end: object | array | function
      指定特殊数据点标注的起始位置，该属性用法同 start。

    • content: string
      辅助文本的显示内容。

    • style: object
      style:{ point:{}, line:{}, text:{} }， point/line/text样式，更详细的配置项

    • display: object
      display:{ point:true | false, line:true | false, text:true | false }， 是否显示point/line/text。

    • lineLength: number
      line的长度，default为30。

    • regionStyle: object
      区间area样式，更详细的配置项 绘图属性

    • direction: string
      标注点朝向：'upward' | 'downward', default为'upward'，即向上

    facet

    (type:string, config:object)

    用于生成分面。

    1. chart.facet(type, {
    2.   fileds: [ 'field1', 'field2', ...],
    3.   showTitle: true, // 显示标题
    4.   autoSetAxis: true, // 自动设置坐标轴的文本，避免重复和遮挡
    5.   padding: 10, // 每个 view 之间的间距
    6.   /**
    7.    * 创建每个分面中的视图
    8.    * @param  {object} view  视图对象
    9.    * @param  {object} facet facet中有行列等信息，常见属性：data rows cols rowIndex colIndex rowField colField
    10.    * @return {null}
    11.    */
    12.   eachView(view, facet) {},
    13.   // 列标题
    14.   colTitle: {
    15.     offsetY: -15,
    16.     style: {
    17.       fontSize: 14,
    18.       textAlign: 'center',
    19.       fill: '#444'
    20.     }
    21.   },
    22.   // 行标题
    23.   rowTitle: {
    24.     offsetX: 15,
    25.     style: {
    26.       fontSize: 14,
    27.       textAlign: 'center',
    28.       rotate: 90,
    29.       fill: '#444'
    30.     }
    31.   }
    32. })

    参数

    • type: string
      分面类型，现支持的类型为：rect, list, tree, mirror, matrix。

    • fileds: string | array
      设置分面的字段，用于划分数据集。

    • showTitle: boolean
      是否显示分面的标题，默认为 true，即展示。

    • autoSetAxis: boolean
      是否自动设置坐标轴的文本，避免重复和遮挡，默认为 true，即自动设置。

    • padding: number | array
      设置每个 view 之间的间距。padding 是view 的内部边距，所以不会影响布局。

    • eachView: function
      回调函数，用于绘制每一个分面对应 view。该回调函数的内容如下：

    1. /**
    2.  * 创建每个分面中的视图
    3.  * @param  {object} view  视图对象
    4.  * @param  {object} facet facet中有行列等信息，常见属性：data rows cols rowIndex colIndex rowField colField
    5.  * @return {null}
    6. */
    7. eachView(view, facet) {}
    • colTitle: object | null
      分面列标题设置，可设置属性如下，如果属性值为 null，表示不展示列标题
    1. colTitle: {
    2.   offsetY: -15, // 列标题垂直方向的偏移
    3.   style: {
    4.     fontSize: 14,
    5.     textAlign: 'center',
    6.     fill: '#444'
    7.   } // 标题文本样式
    8. }
    • style 的更详细的配置项
    • rowTitle: object | null
      分面行标题设置，可设置属性如下，如果属性值为 null，表示不展示列标题
    1. rowTitle: {
    2.   offsetX: -15, // 列标题水平方向的偏移
    3.   style: {
    4.     fontSize: 14,
    5.     textAlign: 'center',
    6.     fill: '#444'
    7.   } // 标题文本样式
    8. }
    • style 的更详细的配置项 绘图属性
      !注意：showTitle 和 autoSetAxis 用于控制分面的默认行为；colTitle 和 rowTitle 是通过 chart.guild().text() 来实现的，所以所有 chart.guild().text() 的参数都生效。
    示例
    1. const data = [
    2.   { gender: '男', count: 40, class: '一班', grade: '一年级' },
    3.   { gender: '女', count: 30, class: '一班', grade: '一年级' },
    4.   { gender: '男', count: 35, class: '二班', grade: '一年级' },
    5.   { gender: '女', count: 45, class: '二班', grade: '一年级' },
    6.   { gender: '男', count: 20, class: '三班', grade: '一年级' },
    7.   { gender: '女', count: 35, class: '三班', grade: '一年级' },
    8.   { gender: '男', count: 30, class: '一班', grade: '二年级' },
    9.   { gender: '女', count: 40, class: '一班', grade: '二年级' },
    10.   { gender: '男', count: 25, class: '二班', grade: '二年级' },
    11.   { gender: '女', count: 32, class: '二班', grade: '二年级' },
    12.   { gender: '男', count: 28, class: '三班', grade: '二年级' },
    13.   { gender: '女', count: 36, class: '三班', grade: '二年级' }
    14. ];
    15. const chart = new G2.Chart({
    16.   container: 'c4',
    17.   width: 800,
    18.   height: 400,
    19.   animate: false,
    20.   padding: [ 0, 90, 80, 80 ]
    21. });
    22. chart.source(data);
    23. chart.coord('theta');
    24. chart.tooltip({
    25.   showTitle: false
    26. });
    27. chart.facet('tree', {
    28.   fields: [ 'grade','class' ],
    29.   line: {
    30.     stroke: '#00a3d7'
    31.   },
    32.   lineSmooth: true,
    33.   eachView(view, facet) {
    34.     const data = facet.data;
    35.     const dv = new DataSet.View();
    36.     dv.source(data).transform({
    37.       type: 'percent',
    38.       field: 'count',
    39.       dimension: 'gender',
    40.       as: 'percent'
    41.     });
    42.     view.source(dv, {
    43.       percent: {
    44.         formatter(val) {
    45.           return (val * 100).toFixed(2) + '%';
    46.         }
    47.       }
    48.     });
    49.     view.intervalStack().position('percent').color('gender');
    50.   }
    51. }); 
    52. chart.render();

    filter

    (field:string, callback:function)

    过滤数据，如果存在对应的图例，则过滤掉的字段置灰。

    参数

    • field: string

    指定过滤的数据字段。

    • callback: function

    回调函数，用于过滤满足条件的数据。使用如下：

    chart.filter('x', val => {
    // val 参数为 x 字段对应的数据值。
    return val > 20; // 图表将会只渲染数值大于 20 的数值。
    });

    view

    创建视图，返回 view 对象（详见 ）。

    1. chart.view({
    2.   start: { x: 0, y: 0 },
    3.   end: { x: 0.5, y: 0.5 },
    4.   padding: 0,
    5.   animate: true
    6. });

    参数

    • start: Object
      view 的绘图区域的起始点，结构如下：
    1. start: {
    2.   x: 0, // 为 0 - 1 范围的值
    3.   y: 0 // 为 0 - 1 范围的值
    4. }
    • end: Object
      view 的绘图区域的结束点，结构如下：
    1. end: {
    2.   x: 1, // 为 0 - 1 范围的值
    3.   y: 1 // 为 0 - 1 范围的值
    4. }

    • padding: number | array | object
      设置 view 的内边距，支持如下几种设置方式：

    • padding: [ 20, 30, 20, 30]

    • padding: 20
    • padding: { top: 20, right: 30, bottom: 20, left: 30 }
      另外也支持设置百分比，如 padding: [ 20%, 30% ]，该百分比相对于整个图表的宽高。

    padding 为数字以及数组类型时使用方法同 CSS 盒模型。

    • animate: boolean
      是否视图默认带动画，默认为 true，即带动画。

    animate

    (enable: boolean)

    用于动画的开启关闭。

    forceFit

    当父元素宽度变化时，通过调用此方法达到宽度自适应。当然也可以在创建 chart 实例时设置 forceFit 属性。

    line

    创建线图，返回一个 geom 对象，详见 Geom。

    point

    创建点图图，返回一个 geom 对象，详见 。

    path

    创建路径图，返回一个 geom 对象，详见 Geom。

    area

    创建区域图，返回一个 geom 对象，详见 。

    interval

    创建柱图，返回一个 geom 对象，详见 Geom。

    polygon

    创建多边形，返回一个 geom 对象，详见 。

    schema

    创建 K 线、箱型图，返回一个 geom 对象，详见 Geom。

    edge

    创建树图、流程图、关系图，返回一个 geom 对象，详见 。

    heatmap

    创建热力图，返回一个 geom 对象，详见 Geom。

    render

    图表绘制的最后一步，用于将图表渲染至画布。

    清空图表上所有的绘制内容，但是不销毁图表。

    repaint

    图表重绘。

    destroy

    销毁图表，删除生成的图表对象。

    changeData

    (data: array | DataSet.View)

    用于修改图表的数据源，注意这里 data 的数据结构需要同原始的数据结构保持一致。

    changeSize

    (width: number, height: number)

    更改图表的大小。

    参数

    • width: number

    图表宽度。

    • height: number

    图表高度。

    changeWidth

    (width: number)

    更改图表的宽度。

    参数

    • width: number

    图表宽度。

    changeHeight

    (height: number)

    更改图表的高度。

    参数

    • height: number

    图表高度。

    getXScale

    返回图表 x 轴对应的度量。

    getYScales

    获取图表所有 y 轴的度量Scale，以数组的形式返回。

    getXY

    (item: object)

    获取数据对应在画布空间的坐标。返回的结果为一个对象，格式如下：

    1. {
    2.   x: 12, // 画布上的横坐标
    3.   y: 34 // 画布上的纵坐标
    4. }

    如果传入的数据不在画布空间内，则返回 null。

    参数

    参数是一个 Object 类型，结构如下：

    1. {
    2.   'x 轴对应的字段名': '该字段名对应的数值',
    3.   'y 轴对应的字段名': '该字段名对应的数值'
    4. }
    代码实例
    1. const data = [
    2.   { cut: 'a', price: 1 },
    3.   { cut: 'b', price: 2 },
    4.   { cut: 'c', price: 3 },
    5.   { cut: 'd', price: 4 }
    6. ];
    7.  
    8. chart.getXY({
    9.   cut: 'b',
    10.   price: 2
    11. });

    getSnapRecords

    (point: object)

    获取逼近的点 point 的原始数据集合。

    参数

    point 的格式如下，表示的是画布坐标：

    1. const point= {
    2.   x: 100,
    3.   y: 200
    4. }

    返回结果为一个数组。

    getAllGeoms

    获取图表中所有的几何标记对象 ，返回的结果是一个数组： [geom, geom, …]。

    changeVisible

    (visible: boolean)

    显示或者隐藏。

    toDataURL

    返回图表的 dataUrl 用于生成图片，返回 dataUrl 路径。

    downloadImage

    (name: string)

    图表导出功能，通过传入 name 来指定下载图片的文件名。

    参数

    • name: string
      图片的名称，如不指定，则默认为 chart.png。

    showTooltip

    (point: object)

    根据传入的坐标点显示对应的 tooltip 信息，这个方法通常同 chart.getXY() 配合使用。

    point 是一个对象，代表画布上的坐标点，参数格式如下：

    1. {
    2.   x: 12, // 画布上的横坐标
    3.   y: 34 // 画布上的纵坐标
    4. }

    hideTooltip

    隐藏 tooltip，返回 chart 对象。

    (point: object)

    根据传入的坐标点 point，获取当前坐标点上的 tooltip 信息，point 的格式如下，表示的是画布坐标：

    1. const point= {
    2.   x: 100,
    3.   y: 200
    4. }

    在 G2 中，我们将事件分为如下事件：

    • 画布基础事件，如 mousedown click dblclick 等；
    1. chart.on('mousedown', ev => {});
    2. chart.on('mousemove', ev => {});
    3. chart.on('mouseleave', ev => {});
    4. chart.on('mouseup', ev => {});
    5. chart.on('click', ev => {});
    6. chart.on('dblclick', ev => {});
    7. chart.on('touchstart', ev => {});
    8. chart.on('touchmove', ev => {});
    9. chart.on('touchend', ev => {});
    • 绘图区域事件，如 plotmove plotclick 等；
    1. chart.on('plotenter', ev => {});
    2. chart.on('plotmove', ev => {});
    3. chart.on('plotleave', ev => {});
    4. chart.on('plotclick', ev => {});
    5. chart.on('plotdblclick', ev => {});
    • tooltip 事件；
    1. chart.on('tooltip:show', ev => {}); // tooltip 展示
    2. chart.on('tooltip:hide', ev => {}); // tooltip 隐藏
    3. chart.on('tooltip:change', ev => {}); // tooltip 内容发生变化的时候
    • 图形元素事件，即组成图表的各种图形元素；
      我们以 『图形元素名』+ 『基础事件名』 的方式来组合图形元素上的事件，帮助用户进行更精准的事件监听，同时也给交互提供了更大的可能性。图形元素事件对象上都会携带 shape 属性，即表示当前被触发的图形元素。
    1. chart.on('point:click', ev => {});
    2. chart.on('axis-label:click', ev => {});

    由于我们抛出的图形元素事件是通用的，所以当需要针对某一个具体的图形元素进行事件监听时，我们提供了一个 appendInfo 属性，用于帮助用户对特定的图形元素进行事件标识，该属性可用于以下四个接口：

    • chart.axis()
    • chart.legend()
    • chart.guide()
    • geom().label()
      使用方式如下：
    1. chart.guide().line({
    2.   top: true,
    3.   start: ['min', 50],
    4.   end: ['max', 50],
    5.   text: {
    6.     content: 'Safe sugar intake 50g/day',
    7.     position: 'end',
    8.     style: {
    9.       textAlign: 'end'
    10.     }
    11.   },
    12.   lineStyle: {
    13.     endArrow: true,
    14.     lineWidth: 10
    15.   },
    16.   appendInfo: {
    17.     id: 'sugar'
    18.   }
    19. });
    20.  
    21. chart.on('guide-line:click', ev => {
    22.   console.log('guide-line:click', ev.appendInfo); // {id: 'sugar'}
    23. });
    24. chart.on('guide-line-text:click', ev => {
    25.   console.log('guide-line-text:click', ev.appendInfo); // {id: 'sugar'}
    26. });
    • lineStyle, style 的更详细的配置项
      下图展示了图表各个组件的名称：
      Chart - 图12
      下图通过监听 interval:mouseenter 和 事件，定义当鼠标 hover 的交互。
    1. const data = [
    2.   { country: 'Lithuania', litres: 501.9 },
    3.   { country: 'Czech Republic', litres: 301.9 },
    4.   { country: 'Ireland', litres: 201.1 },
    5.   { country: 'Germany', litres: 165.8 },
    6.   { country: 'Australia', litres: 139.9 },
    7.   { country: 'Austria', litres: 128.3 },
    8.   { country: 'UK', litres: 99 },
    9.   { country: 'Belgium', litres: 60 },
    10.   { country: 'The Netherlands', litres: 50 }
    11. ];
    12.  
    13. const ds = new DataSet();
    14. const dv = ds.createView()
    15.   .source(data)
    16.   .transform({
    17.     type: 'percent',
    18.     field: 'litres',
    19.     dimension: 'country',
    20.     as: 'percent'
    21.   });
    22.  
    23. const chart = new G2.Chart({
    24.   container: 'c5',
    25.   forceFit: true,
    26.   height: 400
    27. });
    28. chart.source(dv, {
    29.   percent: {
    30.     formatter: val => {
    31.       val = (val * 100).toFixed(2) + '%';
    32.       return val;
    33.     }
    34.   },
    35.   nice: false
    36. });
    37. chart.coord('theta', {
    38.   innerRadius: 0.3,
    39.   radius: 0.95
    40. });
    41. chart.tooltip({
    42.   showTitle: false
    43. });
    44. chart.intervalStack()
    45.   .position('percent')
    46.   .color('country', [ '#67b7dc', '#84b761', '#fdd400', '#cc4748', '#cd82ad', '#2f4074', '#448e4d', '#b7b83f', '#b9783f' ])
    47.   .label('percent', {
    48.     formatter: (val, item) => {
    49.       return item.point.country + ': ' + val;
    50.     }
    51.   })
    52.   .style({
    53.     lineWidth: 2,
    54.     stroke: '#fff'
    55.   });
    56. chart.render();
    57. const canvas = chart.get('canvas');
    58. chart.on('interval:mouseenter', ev => {
    59.   const shape = ev.shape;
    60.   const coord = chart.get('coord');
    61.   if (!shape.get('selected')) {
    62.     shape.attr('shadowBlur', 40);
    63.     shape.attr('shadowColor', 'rgba(0, 0, 0, 0.3)');
    64.     shape.attr('transform', [
    65.       [ 't', -coord.getCenter().x, -coord.getCenter().y ],
    66.       [ 's', 1.1, 1.1 ],
    67.       [ 't', coord.getCenter().x, coord.getCenter().y ]
    68.     ]);
    69.     canvas.draw();
    70.   }
    71. });
    72. chart.on('interval:mouseleave', ev => {
    73.   const shape = ev.shape;
    74.   if (!shape.get('selected')) {
    75.     shape.attr({
    76.       shadowBlur: null,
    77.       shadowColor: null,
    78.       transform: null
    79.     });
    80.     shape.setTransform(null);
    81.     canvas.draw();
    82.   }
    83. });

    更多

    更多的信息可以查看使用各种具体的图表