Chart

属性idcontainerforceFitsyncXYScaleswidthheightpixelRatiodataanimateplotCfgcanvasfrontCanvasbackCanvasplotRangeviewsgeomsscalesoptions方法source参数代码示例cols参数代码col参数代码axischart.axis(false)chart.axis(dim, cfg)参数legendchart.legend(false)chart.legend(cfg)参数chart.legend(dim, cfg)参数coord参数坐标系变换facet参数tooltipchart.tooltip(false)chart.tooltip(true, cfg)参数自定义 html 模板示例chart.tooltip(cfg)guidechart.guide().line(from, to, cfg)参数chart.guide().image(from[, to], cfg)参数chart.guide().text(from, text[, cfg])参数chart.guide().rect(from, to, [cfg])参数chart.guide().tag(from, to, text, [cfg])参数chart.guide().arc(from, to, [cfg])参数chart.guide().html(from, html[, cfg])参数filter参数setModeselectcreateView参数removeView参数getView参数animate参数rendercleardestroyrepaintchangeData参数changeSize参数forceFitgetAllGeomsgetViewsgetView参数getScale参数getPosition参数代码实例getSnapRecordsgetTooltipItemsshowTooltip参数downloadImage事件plotmoveplotenterplotleaveplotclickplotdblclickitemselecteditemunselecteditemselectedchangetooltipchangetooltipshowtooltiphiderangeselectstartrangeselectend获取方式： G2.Chart。 创建一个具体的图表实例。

var chart = new G2.Chart({
  id: 'c1',
  width: 1000,
  height: 500,
  plotCfg: {
    margin: [10, 20, 10, 20],
  }
});

属性以下属性是创建 chart 图表实例时可配置的属性： id类型：String 对应图表的 DOM 容器的 id。 container类型：HTMLDivElement 除了传递 id 值来指定图表容器，也支持直接传入容器的 html 节点对象，如下所示：

var chart = new G2.Chart({
  container: document.getElementById('c1'),
  width : 1000,
  height : 500
});

通过调用 chart.get(‘container’) 可获取该属性。 forceFit类型：Boolean 设置图表的宽度是否自适应，默认为 false，设置为 true，则图表 chart 会继承父元素的宽度，用户设置的 width 则不生效。 syncXYScales类型：Boolean 当 chart 下创建了多个视图 view 的时候，通过设置该属性指定是否需要统一所有视图的 X 和 Y 度量，默认为 false，当设置为 true 时，会对 x y 两个维度对应的线性度量进行统一，默认会按照范围最大的度量为标准进行统一。但对于在 chart 或者 view 上进行了列定义的度量则不参与统一步骤：

如果在 chart 上对 x 、y 两个维度对应的字段进行了列定义，则会按照此列定义为准，并且该 chart 下的 views 也以此列定义为准；如果 chart 中的 view 也进行了列定义，那么就以自己的列定义为准。 示例： 地图 width类型：Number 设置图表的宽度。 height类型：Number 设置图表的高度。 pixelRatio类型：Number 设置像素分辨率。 data类型：Array 设置图表的数据源，data 是一个包含 JSON 对象的数组。 通常我们会使用 chart.source(data[, colDef, namesArr]) 设置数据源。 animate类型：Boolean chart 是否执行动画，默认值为 true，执行， false 不执行。 plotCfg类型：Object 设置图表绘图区域的配置信息，包括外边距、边框、背景等信息。 图表布局如下图所示： 橙色区域为 background，灰色区域为 border。 支持的配置属性:

var plotCfg = {
  margin: [10,20,20,30], // 边距设置，接受参数同 css 的 margin
  border: {
    stroke: 'red', // 边框颜色
    strokeOpacity: 0.4, // 边框的透明度设置，0 至 1 范围的数据
    lineWidth: 1, // 边框粗细
    fill: '#ff8800' // 设置整个容器的背景色
    fillOpacity: 0.4, // 背景色的透明度设置，0 至 1 范围的数据
    radius: 5 // 边框的圆角
  }, // 边框设置 图形属性
  background: {
    stroke: 'red', // 边颜色
    strokeOpacity: 0.4, // 边框的透明度设置，0 至 1 范围的数据
    lineWidth: 1, // 边框粗细
    fill: '#efefef', // 背景色
    fillOpacity: 0.4, // 背景色的透明度设置，0 至 1 范围的数据
    radius: 30 // 圆角设置
  } // 绘图区域背景设置
};

通过 chart.get(‘attrName’) 可以获取如下只读属性： canvas类型：G2.Canvas 在教程 G2 图表的主要组成章节中提到，G2 绘制的图表由三层 canvas 组成，其中 canvas 用于绘制 geom。 frontCanvas类型：G2.Canvas 最上层的 canvas，图例 legend、提示信息 tooltip、和 text tag html 这三种类型的辅助标记 guide 在这一层绘制。 backCanvas类型：G2.Canvas 最下层的 canvas，坐标轴 axis 和 line image rect arc 这四种类型的辅助标记 guide 在这一层绘制。 plotRange类型：Object 该属性包含整个图表的绘图区域范围内各个关键坐标点的信息。通过调用 chart.get(‘plotRange’) 获取。 具体结构如下：

{
  'start': {'x':100,'y':320}, // 绘图区域起始点坐标，可以理解为坐标系原点
  'end': {'x':720,'y':40}, // 绘图区域结束点坐标
  'tl': {'x':100,'y':40}, // 绘图区域左上角点坐标，top-left
  'tr': {'x':720,'y':40}, // 绘图区域右上角点坐标，top-right
  'bl': {'x':100,'y':320}, // 绘图区域左下角点坐标，bottom-left
  'br': {'x':720,'y':320}, // 绘图区域右下角点坐标，bottom-right
  'cc': {'x':410,'y':180} // 绘图区域中心店坐标
}

views类型：Array 返回该 chart 实例包含的所有视图 View 对象，亦可通过 chart.getViews() 方法获取。 geoms类型：Array 返回该 chart 实例包含的所有几何标记 Geom 对象，亦可通过 chart.getAllGeoms() 方法获取。 scales类型：Object 返回 chart 实例的所有 scale 度量对象。 options类型：Object 返回生成 chart 实例相关的所有配置项，详见 配置项支持。 方法source方法名：chart.source(data[, colDefs, namesArr]) 说明：配置图表的数据以及相关的列定义信息。 参数 data: Array 数据源数据，标准的 JSON 数组。

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

namesArr: Array 作为附加字段，用于补全数据源包含的数据字段，常用于数据源含有不同数据字段的记录。 代码示例

var data = [
  {type: 0, value: 1},
  {type: 1, value: 2},
  {type: 2, value: 3},
  {type: 2, value: 3, color: ‘#f80’},
];
chart.source(data, {
  type: {
    type: ‘cat’, // 声明 type 字段为分类类型
    values: [‘A’, ‘B’, ‘C’] // 重新显示的值
    alias: ‘类型’ // 设置属性的别名
  }
}, [‘color’]);

cols方法名：chart.cols(cfg) 说明：为多个数据字段进行列定义。 注意：

该方法是对于数据进行定义，会影响后面图形的绘制，所以必须先于图形语法语句（chart..position()…）进行声明；如数据字段 dim 在 chart.source() 和 chart.cols() 中均有定义，那么 chart.cols() 中的配置会覆盖 chart.source() 中的配置。 参数 cfg: Object 用于数据字段的定义，如数据的类型，显示别名，时间类型的格式等，不同的数字类型的配置项不同，详情参考。 代码

var data = [
  {type: 0, value: 1},
  {type: 1, value: 2},
  {type: 2, value: 3},
];
chart.cols({
  ‘type’: {
    type: ‘cat’, // 声明 type 字段为分类类型
    values: [‘A’, ‘B’, ‘C’] // 重新显示的值
    alias: ‘类型’ // 设置属性的别名
  },
  ‘value’: {
    type: ‘cat’
  }
});

col方法名：chart.col(dim, cfg) 说明：为对应的数据字段进行列定义，当需要对多个字段进行列定义时，推荐使用 chart.source() 或者 chart.cols()。 注意：

该方法是对于数据进行定义，会影响后面图形的绘制，所以必须先于图形语法语句（chart..position()…）进行声明；如数据字段 dim 在 chart.source() 和 chart.col() 中均有定义，那么 chart.col() 中的配置会覆盖 chart.source() 中的配置。 参数 dim: String 数据源中对应的字段名，表示只为该 dim 进行列定义。

cfg: Object 用于数据字段的定义，如数据的类型，显示别名，时间类型的格式等，不同的数字类型的配置项不同，详情参考。 代码

var data = [
  {type: 0, value: 1},
  {type: 1, value: 2},
  {type: 2, value: 3},
];
chart.col(‘type’, {
  type: ‘cat’, // 声明 type 字段为分类类型
  values: [‘A’, ‘B’, ‘C’] // 重新显示的值
  alias: ‘类型’ // 设置属性的别名
});

axis方法名：chart.axis(dim, cfg) 说明：配置图表坐标轴。 chart.axis(false)不展示所有的坐标轴。 chart.axis(dim, cfg)参数 dim: String dim 对应数据源中的字段名，即指定设置该字段对应的坐标轴显示样式。

cfg: Object 设置坐标轴配置信息，如果值为 false，表示不显示该字段对应的坐标轴。可配置属性如下：

chart.axis('dim', false); // 不显示该字段对应的坐标轴
chart.axis('dim', {
  position: 'top', // 设置坐标轴的显示位置，可取值 top bottom left right
  formatter: function(dimValue) {
    return (dimValue / 1000).toFixed(0) + 'k';
  }, // 回调函数，用于格式化坐标轴上显示的文本信息
  line: {
    lineWidth: 1, // 设置线的宽度
    stroke: '#ccc' //  设置线的颜色
  }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
  labels: {
    label: {
      textAlign: 'center', // 文本对齐方向，可取值为： start middle end
      fill: '#404040', // 文本的颜色
      fontSize: '12', // 文本大小
      fontWeight: 'bold', // 文本粗细
      rotate: 30 * Math.PI / 180, // 文本旋转 30 度，需要将 30 度转化为弧度，2.3.0 及以上版本只支持弧度设置
      textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
    }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本
    autoRotate: true // 是否需要自动旋转
  },
  title: {
    fontSize: '12',
    textAlign: 'center',
    fill: '#999',
    fontWeight: 'bold'
  }, // 坐标轴标题设置，如果值为 null，则不显示标题
  tickLine: {
    lineWidth: 1, // 刻度线宽
    stroke: '#ccc', // 刻度线的颜色
    value: 5, // 刻度线的长度
  }, // 坐标轴刻度线配置
  titleOffset: 45, // 设置标题 title 距离坐标轴线的距离
  labelOffset: 20, // 设置坐标轴文本 label 距离坐标轴线的距离
  grid: {
    type: 'polygon', // 用于极坐标下网格线样式的配置
    odd: {
      fill: '#ccc',
      opacity: 0.3,
      stroke: '#999'
    }, // 奇数项背景样式设置
    even: {
      fill: '#ccc',
      opacity: 0.3,
      stroke: '#999'
    }, // 偶数项背景样式设置
    line: {
      stroke: '#d9d9d9', // 网格线的颜色
      lineWidth: 1, // 网格线的宽度
      lineDash: [4, 4] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
    } // 设置坐标轴网格线，如果 grid: null 则代表不绘制网格线
  }, // 坐标轴栅格线的配置信息，默认只有左边的坐标轴带有栅格线，null 为不显示。
  gridAlign: 'start'// 栅格的位置跟坐标轴刻度线(tickLine)的对齐方式，当前仅支持 start 和 middle
});

legend方法名：chart.legend(dim, cfg) 说明：设置图例样式。 chart.legend(false)不显示所有的图例。 chart.legend(cfg)为默认的图例进行配置，在图例章节我们提到过，shape, color, size 这三个图形属性如果判断接收的参数是数据源的字段时，会自动生成对应的图例。所以当 chart.legend() 第一个参数是一个 Object 对象时，表示默认为所有自动生成的图例设置样式。 参数 cfg: Object 分类类型和连续类型的配置有一定的区别，下面列出了这两种类型支持的可配置的属性： 注意：选中模式配置属性 selectedMode， 在 [email protected] 及以上 已改为 mode，2.3.0 以下版本请使用 selectedMode。

// 分类类型图例
chart.legend({
  position: 'right', // 图例的显示位置，有 'top','left','right','bottom'四种位置，默认是'right'。
  leaveChecked: false, // 是否保留一项不能取消勾选，默认为 false，即不能取消勾选。
  mode: 'multiple' || 'single' || false, // 设置图例筛选模式，默认为 'multiple' 多选，'single' 表示单选，false 表示禁用筛选
  title: null, // 是否展示图例的标题，null 为不展示，默认 top bottom 两个位置的图例不展示标题。
  spacingX: 10, // 用于 position 为 top 或者 bottom 时调整子项之间的水平距离
  spacingY: 12, // 用于 position 为 left 或者 right 时调整子项之间的垂直距离
  unChecked: '#CCC', // 未选中时 marker 的颜色
  wordSpaceing: 2,  // marker 和文本之间的距离
  dx: 5, // 整个图例的水平偏移距离
  dy: 10, // 整个图例的垂直偏移距离
  itemWrap: false, // 是否自动换行，默认为 false，true 为自动换行
  word: {
    fill: 'red',
    fontSize: 14
  }, // 图例各个子项文本的颜色
  back: {
    fill: 'red'
  }, // 图例外边框和背景的配置信息
  formatter:  function(val) {
    return val + '%';
  }, // 格式化图例项的文本显示
  marker: 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'hollowCircle', 'hollowSquare', 'hollowBowtie', 'hollowDiamond', 'hollowHexagon', 'hollowTriangle', 'hollowTriangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line' // 配置 marker 的显示形状
});

// 连续类型图例
chart.legend({
  mode: false, // 关闭连续图例的筛选功能，默认为开启状态
  width: 30, // 连续图例宽度
  height: 80, // 连续图例高度度
  position: 'right', // 图例的显示位置，有 'top','left','right','bottom'四种位置，默认是'right'。
  title: null, // 图例的标题配置，null 为不展示，默认 top bottom 两个位置的图例不展示。
  word: {
    fill: 'red'
  }, // 文本属性
  back: {
    fill: 'red'
  } // 图例外边框和背景的配置信息，是一个矩形 图形属性
});

chart.legend(dim, cfg)参数 dim: String 可以传入对应图例的数据源的数据字段名。

cfg: Object 为对应字段的图例图例配置信息，属性同上述，这里不再说明。 coord方法名：chart.coord(type[, cfg]) 说明：设置图表坐标系，并可对坐标系进行各种操作。注意 chart.coord(type[, cfg]) 操作返回的不是 chart 对象，而是同 Coord 坐标系有关的一个辅助类，以便进行坐标系的各种变换。 参数 type: String 坐标系的类型，具体包括： type说明示例 rect默认类型，直角坐标系，由 x, y 两个垂直的维度构成。 polar极坐标系，由角度和半径 2 个维度构成。clock极坐标的一种，用于绘制时钟的坐标系。 gauge极坐标的一种，仪表盘坐标系。 theta一种半径固定的极坐标系，常用于饼图。 map地理坐标系，支持不同类型的地理投影 helix螺旋坐标系，常用于周期性数据

cfg: Object 【可选】 坐标系的配置信息。 对于 type 为 polar、theta 类型的极坐标系，其可配置的 cfg 属性如下：

chart.coord('polar | theta', {
radius: 0.5, // 设置半径，值为 0 至 1 的小数
inner: 0.3 // 内部极坐标系的半径，[0 - 1]的小数
startAngle: 弧度, // 起始角度
endAngle: 弧度 // 结束角度
});

对于 map 类型的坐标系，情况比较特殊，对于不同的投影支持的配置参数不同。目前，您可以直接复制下列代码即可使用 G2 提供的 map 坐标系。

// 适用于中国地图的 albers 投影
chart.coord('map', {
projection: 'albers', // 指定投影方法
basic: [110, 0, 25, 47], // 指定投影方法的基本参数，[λ0, φ0, φ1, φ2] 分别表示中央经度、坐标起始纬度、第一标准纬度、第二标准纬度
max: [16.573, -13.613], // 指定投影后最大的坐标点
min: [-27.187, -49.739] // 指定投影后最小的坐标点
});
// 适用于世界地图的 albers 投影
chart.coord('map', {
projection: 'albers', // 指定投影方法
basic: [0, 0, 0, 60], // 指定投影方法的基本参数，[λ0, φ0, φ1, φ2] 分别表示中央经度、坐标起始纬度、第一标准纬度、第二标准纬度
max: [161.89, 120.635], // 指定投影后最大的坐标点
min: [-144.485, -27.666] // 指定投影后最小的坐标点
});
// 适用于世界地图的 mercator 投影
chart.coord('map', {
projection: 'mercator',
max: [180, 165.65], // 指定投影后最大的坐标点
min: [-180, -67.21] // 指定投影后最小的坐标点
});
// 使用与中国地图的 mercator 投影
chart.coord('map', {
projection: 'mercator',
max: [134.77, 63.68],
min: [73.60, 18.48]
});

对于螺旋坐标系，其可配置的 cfg 属性如下：

chart.coord('helix', {
startAngle: Math.PI, // 螺旋线起点弧度
endAngle: 7 * Math.PI // 螺线线终点弧度
});

坐标系变换可支持的变换操作：

rotate(angle): 坐标系旋转，angle 为旋转的角度，是一个度数值。 scale(sx, sy): 坐标系缩放，sx 代表 x 方向缩放比例，sy 代表 y 方向缩放比例。 reflect(): 坐标系转置，将 x 或者 y 的起始、结束值倒置 transpose(): 将坐标系 x 轴和 y 轴转置。

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

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

facet方法名：chart.facet(dimArray, cfg) 说明：设置分面的切割维度和配置信息。 参数 dimArray: Array 用于切割分面的数据源字段，是一个数组 Array。

cfg: Object 分面的配置信息。不同类型的分面除了含有共同的配置项外，还对应各自的配置项。

通用的配置项

chart.facet([dims], {
type: 'rect' | 'list' | 'circle' | 'tree' | 'mirror', // 设置分面的布局类型
margin: 10, // 各个分面之间的距离，同 CSS 盒模型中的 margin
facetTitle: { // 各个分面标题的样式配置
  titleOffset: 16, // 标题距离内容区的偏移
  colDimTitle: {
    title: {
      fontSize: 14,
      textAlign: 'center',
      fill: '#999'
    }
  },
  colTitle: {
    title: {
      fontSize: 12,
      textAlign: 'center',
      fill: '#999'
    }
  },
  rowTitle: {
    title: {
      fontSize: 12,
      textAlign: 'center',
      rotate: 90,
      fill: '#999'
    }
  },
  rowDimTitle: {
    title: {
      fontSize: 12,
      textAlign: 'center',
      rotate: 90,
      fill: '#999'
    }
  }
}
});

下面列出每一种分面类型各自的参数配置项：

rect 矩阵分面无 list 列表型分面

chart.facet([dims], {
type: 'list',
cols: 2 // 每行有只展示 2 个分面，超过 2 个则自动折行
});

circle 圆形分面

chart.facet([dims], {
type: 'circle'
});

tree 树形分面

chart.facet([dims], {
type: 'tree',
smooth: true, // 各个树节点的连接线是否是平滑的曲线
line: {
  stroke: 'red', // 连接边的颜色
  lineWidth: 1 // 连接边的粗细
} // 连接各个树节点的线的配置项
});

mirror 镜像分面

chart.facet([dims], {
type: 'mirror',
transpose: true // 设置镜像是否反转，默认为 false，不翻转， true 则翻转
});

tooltip方法名：chart.tooltip([enable,] cfg) 说明：设置显示的提示信息的内容 chart.tooltip(false)表示禁用 tooltip。 chart.tooltip(true, cfg)参数 enable: Boolean 当 enable 为 true 时，表示 tooltip 可用，主要用于关闭 tooltip 之后重新开启。默认为 true，可不设置。

cfg: Object tooltip 配置信息，当对 G2 自动生成的 tooltip 展示信息不满意时，可以通过这个方法进行部分自定义，如下所示： 注：当然配置 tooltip 还有其他多种方法，可详见教程：tooltip 提示信息

chart.tooltip(true, {
  title: null, // 用于控制是否显示 tooltip 框内的 title
  map: { // 用于指定 tooltip 内显示内容同原始数据字段的映射关系复制代码
    title: '数据字段名或者常量', // 为数据字段名时则显示该字段名对应的数值，常量则显示常量
    name: '数据字段名或者常量', // 为数据字段名时则显示该字段名对应的数值，常量则显示常量
    value: '数据字段名' // 为数据字段名时则显示该字段名对应的数值
  },
  offset: 15, // 偏移量，设置 tooltip 显示位置距离 x 轴方向上的偏移
  crosshairs: true, // 是否展示 tooltip 的辅助线，默认为 false，不展示
  crossLine: {
    stroke: '#666', // 辅助线的颜色
    lineWidth: 2, // 辅助线的宽度
    lineDash: [2, 3] // 设置虚线样式
  }, // crosshairs 为 true 时，为辅助线设置样式
  padding: [10, 10, 10, 10], // 提示框内边距
});

crosshairs 参数支持三种展示形式： 配置说明crosshairs: true启用辅助线，默认为竖直方向的辅助线。crosshairs: {type: ‘x’}启用水平方向的辅助线。crosshairs: {type: ‘cross’}启用十字辅助线，水平和数值方向均有。

当需要使用自定义的 html 模板生成 tooltip 时，需要对 tooltip 进行如下配置：

chart.tooltip(true, {
  custom: true, // 表示使用自定义的模板显示 tooltip
  html: '
', // tooltip 的 html 外层模板
  itemTpl: '{index}{name}{value}k', // 使用 html 时每一个显示项的模板，默认支持 index, color, name, value 这四个字段。
  offset: 50, // 偏移量，设置tooltip 显示位置距离 x 轴方向上的偏移
  customFollow: false // 设置 tooltip 是否跟随鼠标移动，默认为 true，跟随。
});

自定义 html 模板示例

var data = [
    {"month":0,"tem":7,"city":"tokyo"},
    {"month":1,"tem":6.9,"city":"tokyo"},
    {"month":2,"tem":9.5,"city":"tokyo"},
    {"month":3,"tem":14.5,"city":"tokyo"},
    {"month":4,"tem":18.2,"city":"tokyo"},
    {"month":5,"tem":21.5,"city":"tokyo"},
    {"month":6,"tem":25.2,"city":"tokyo"},
    {"month":7,"tem":26.5,"city":"tokyo"},
    {"month":8,"tem":23.3,"city":"tokyo"},
    {"month":9,"tem":18.3,"city":"tokyo"},
    {"month":10,"tem":13.9,"city":"tokyo"}
  ];
  var chart = new G2.Chart({
    id: ‘c1’,
    width: 800,
    height: 400
  });
  var defs = {‘month’:{
    type: ‘cat’,
    values: [‘一月’,‘二月’,‘三月’,‘四月’,‘五月’,‘六月’,‘七月’,‘八月’,‘九月’,‘十月’,‘十一月’,‘十二月’]
  }};
  chart.source(data,defs);
  chart.tooltip(true,{ // 第一个参数是控制是否显示tooltip，可以设置为false，不显示tooltip
    custom: true,
    html:  ‘
‘, // tooltip的外层模板
    itemTpl: ‘{index}{name}{value}‘, // 支持的字段 index,color,name,value
    offset: 50
  });
  chart.line().position(‘month*tem’);
  chart.render();

chart.tooltip(cfg)默认显示 tooltip，cfg 配置信息同上。 guide方法名：chart.guide().() 说明：为图表添加静态的辅助标记，如辅助线、辅助图片、辅助文本等，具体介绍可详见guide 教程。chart.guide() 方法同 chart.coord() 一样会返回一个 GuideAssist 对象，该对象支持以下类型的辅助标记元素的绘制: chart.guide().line(from, to, cfg)绘制辅助线。 参数 from: Arrayto: Array 分别表示线的起点和终点，这两个参数均为数组 Array 格式： [x, y]：

x：是 x 轴坐标对应字段的值，是原始数据值，不是画布坐标。y：是 y 轴坐标对应字段的值，是原始数据值，不是画布坐标。 当然，如果 x、y 值为分类类型的话，则支持传入索引值。 另外还提供了两个关键字： min max 用于表示对应字段的最大值和最小值，主要用户快速定位坐标轴的起点和终点。

cfg: Object 用于辅助线的图形属性配置。

// 添加辅助线
chart.guide().line([startXValue, startYValue], [endXValue, endYValue], {
  stroke: '#999', // 线的颜色
  lineDash: [0, 2, 2], // 虚线的设置
  lineWidth: 3 // 线的宽度
});

chart.guide().image(from[, to], cfg)绘制辅助图片。 参数 from: Arrayto: Array 同 chart.guide.line()，但是这里的 to 参数可选。

cfg: Object

// 添加辅助图片
chart.guide().image([startXValue, startYValue], [endXValue, endYValue], {
  src: 'http://gtms02.alicdn.com/VXXXXaZX.png', // 图片路径
  width: 160, // 宽度，可以不设置，如果设置了 [endXValue, startYValue]，此属性无效
  height: 230 // 高度，可以不设置，如果设置了 [endXValue, endYValue]，此属性无效
});

chart.guide().text(from, text[, cfg])绘制辅助文本。 参数 from: Array 同 chart.guide.line()。

text: String 辅助文本显示内容。

cfg: Object 辅助文本的显示样式配置，可选，不配置使用默认 G2 提供的配置。

// 添加辅助文本
chart.guide().text([startXValue, startYValue], '我是辅助文本呀！', {
  fill: '#666', // 文本颜色
  fontSize: '12', // 文本大小
  fontWeight: 'bold' // 文本粗细
});

chart.guide().rect(from, to, [cfg])绘制辅助框。 参数 from: Arrayto: Array 同 chart.guide.line()。

cfg: Object 辅助框的显示样式配置，可选，不配置使用默认 G2 提供的配置。

// 添加辅助框
chart.guide().rect([startXValue, startYValue], [endXValue, endYValue], {
  lineWidth: 0, // 辅助框的边框宽度
  fill: '#f80', // 辅助框填充的颜色
  fillOpacity: 0.1, // 辅助框的背景透明度
  stroke: '#ccc' // 辅助框的边框颜色设置
});

chart.guide().tag(from, to, text, [cfg])绘制辅助标记。 参数 from: Arrayto: Array 同 chart.guide.line()。

text: String 辅助标记文本内容。

cfg: Object 辅助标记的显示样式配置，可选，不配置使用默认 G2 提供的配置。

// 添加辅助标记
chart.guide().tag([startXValue, startYValue], [endXValue, endYValue], '文本', {
  line: {
    stroke: '#999',
    lineDash: [0, 2, 2]
  }, // 辅助标记中连接线的样式配置
  text: {
    fill: '#666',
    fontSize: '12',
    textAlign: 'center'
  }, // 辅助标记中文本的样式配置
  rect: {
    lineWidth: 0,
    fill: '#999',
    fillOpacity: 0.1
  } // 辅助标记中背景框的样式配置
});

chart.guide().arc(from, to, [cfg])绘制辅助弧线。 参数 from: Arrayto: Array 同 chart.guide.line()。

cfg: Object 辅助弧线的显示样式配置，可选，不配置使用默认 G2 提供的配置。

// 添加辅助标记
chart.guide().arc([startXValue, startYValue], [endXValue, endYValue], {
  stroke: '#999', // 线的颜色
  lineDash: [0, 2, 2], // 虚线的设置
  lineWidth: 3 // 线的宽度
});

chart.guide().html(from, html[, cfg])绘制辅助html。 参数 from: Array 文本位置，格式： [x, y]

html: String 辅助 html 的自定义内容。

cfg: Object html 的配置信息。包含 align 和 ofsset 两个属性。

对齐 align 支持 tr、tc、tl、br、bc、bl、lc、rc、cc 9 点对齐；偏移坐标 offset，类型：数组 Array， 格式： [x, y]，可选，不配置使用默认 G2 提供的配置。

// 添加辅助html
// 坐标点
var point = [3.5,12000];
//html字符串
var tooltipHtml = "异常值";
chart.guide().html(point, tooltipHtml, {
  align:'br',
  offset:[10, 0]
});

filter方法名：chart.filter(dim, remained) 说明：过滤数据，如果存在对应的图例，则过滤掉的字段置灰。 参数 dim: String 指定过滤数据源的哪一个字段。

remained: Array 指定保留的字段值。

如果是分类类型，则传入需哟啊保留的值即可；

chart.filter('cut', ['Ideal', 'Good']); // 仅显示切割工艺Ideal,Good的钻石

如果是连续类型，则传入一个范围区间：

chart.filter('value', [20, 130]);

setMode用于开启和关闭图表交互模式，目前仅支持框选模式。使用如下：

chart.setMode('select'); // 开启框选模式
chart.setMode(false); // 关闭框选模式

select当用于开启框选模式时，通过调用 chart.select(type) 来选择框选的模式。 目前我们提供了如下三种框选交互形式：

chart.select('rangeX'); // 使用 X 轴范围的框选
chart.select('rangeY'); // 使用 Y 轴范围的框选
chart.select('rangeXY'); // 使用 X 和 Y 轴的框选

createView方法名：chart.createView(cfg) 说明：创建视图，返回一个视图对象 View，详见 View。 参数 cfg: Object 初始化视图对象时的配置项，如下：

{
  index: 0， // 索引值，用于标定 view
  start: { // 视图绘图区域的起始点
    x: 0,
    y: 0
  },
  end: { // 视图绘图区域的结束点
    x: 1,
    y: 1
  },
  data: [], // 视图源数据
}

removeView方法名： chart.removeView(view) 说明：删除指定的视图。 参数 view: View 需要删除的视图对象。 getView方法名：chart.getView(index) 说明：根据索引值获得视图对象。 参数 index: String 需要获取的视图的 id 标识。 animate方法名：chart.animate(enable) 说明：是否执行图表动画。 参数 enable: Boolean 默认都是执行动画的，除了通过创建 chart 时设置 animate 属性，也可以通过调用该方法开启和关闭动画。

chart.animate(false); // 关闭动画

render方法名：chart.render() 说明：最后一步，绘制图表，当调用这个方法后，图表即可被渲染绘制出来。 clear方法名：chart.clear() 说明：清空图表上所有的绘制内容，但是不销毁图表。 destroy方法名：chart.destroy() 说明：销毁图表，删除生成的图表对象。 repaint方法名：chart.repaint() 说明：图表重绘。 changeData方法名：chart.changeData(data) 说明：用于修改图表的数据源，注意这里 data 的数据结构需要同原始的数据结构保持一致。 参数 data: Array 新的数据源，一样是 JSON 数组，但是其数据结构需要同原始的数据结构保持一致。 changeSize方法名：chart.changeSize(width, height) 说明：更改图表的大小。 参数 width: Number 图表宽度

height: Number 图表高度 forceFit方法名：chart.forceFit() 说明：当父元素宽度变化时，通过调用此方法达到宽度自适应。当然也可以在创建 chart 实例时设置 forceFit 属性。 getAllGeoms方法名：chart.getAllGeoms() 说明：获取图表中所有的几何标记对象，返回的结果是一个数组： [geom, geom, …]。 getViews方法名：chart.getViews() 说明：获取图表中所有的视图对象，返回的结果是一个数组： [view, view, …]。 getView方法名：chart.getView(id) 说明：根据传入的 id 属性获取图表中对应的视图对象。 参数 id: String view 的 id 属性。 getScale方法名：chart.getScale(dim) 说明：dim 为数据源的某个字段名，该方法用于获取该 dim 对应的度量scale对象。 参数 dim: String 对应数据源中的数据字段。 getPosition方法名： chart.getPosition({xDim: value, yDim: value}) 说明：获取原始数据对应在画布空间上的坐标，返回的结果为一个对象，格式如下：

{
  x: 12, // 画布上的横坐标
  y: 34 // 画布上的纵坐标
}

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

{
  'x 轴对应的字段名': '该字段名对应的数值',
  'y 轴对应的字段名': '该字段名对应的数值'
}

代码实例

var data = {
  cut: ‘a’, price: 1,
  cut: ‘b’, price: 2,
  cut: ‘c’, price: 3,
  cut: ‘d’, price: 4
};
chart.getPosition({
  cut: ‘b’,
  price: 2
});

getSnapRecords方法名：chart.getSnapRecords(point) 说明：根据传入的坐标点 point，获取逼近的该坐标点的所有 shape 的绘制数据，point 的格式如下，表示的是画布坐标：

var point= {
  x: 100,
  y: 200
}

返回结果为一个数组，该 shape 对应的原始数据可以通过 _origin 字段获取。 getTooltipItems方法名：chart.getTooltipItems(point) 说明：根据传入的坐标点 point，获取当前坐标点上的 tooltip 信息，point 的格式如下，表示的是画布坐标：

var point= {
  x: 100,
  y: 200
}

showTooltip方法名：chart.showTooltip(point) 说明：根据传入的坐标点显示对应的 tooltip 信息，这个方法通常同 chart.getPosition({xDim: value, yDim: value}) 配合使用。 参数 point: Object point 是一个对象，代表画布上的坐标点，参数格式如下：

{
x: 12, // 画布上的横坐标
y: 34 // 画布上的纵坐标
}

downloadImage方法名：chart.downloadImage()说明：提供图表下载功能，同时返回 image 数据。 事件chart 对象提供了各种事件，方便用户扩展交互。基本的事件用法如下：

chart.on('eventType', fn); // 添加事件
chart.off('eventType', fn); // 移除事件

chart.off(‘eventType’, fn) 其中如果 fn 不指定，表示删除所有 eventType 事件，如果 eventType 和 fn 都不指定，则表示删除所有事件。 下面列出了 chart 支持的所有事件类型。 plotmove鼠标在绘图区域移动时触发，在图表的绘图区域外不触发。

ev 表示事件触发时返回的对象，包含以下属性 x：当前鼠标所在的画布上的 x 坐标；y：当前鼠标所在的画布上的 y 坐标；target：canvas 对象；toElement：当前 dom 元素；shape: 当前鼠标所在的 shape 对象；views: Array，当前鼠标所在的视图。

chart.on('plotmove', function(ev) {
  var point = {
    x: ev.x,
    y: ev.y
  };
  var items = chart.getTooltipItems(point);
  console.log(items);
});

plotenter当鼠标移动进入绘图区域时触发。

ev 表示事件触发时返回的对象，包含以下属性 x：当前鼠标所在的画布上的 x 坐标；y：当前鼠标所在的画布上的 y 坐标；target：canvas 对象；toElement：当前 dom 元素；views: Array，当前鼠标所在的视图。。

chart.on('plotenter', function(ev) {
  var point = {
    x: ev.x,
    y: ev.y
  };
  // do something
});

plotleave当鼠标移出绘图区域时触发。

ev 表示事件触发时返回的对象，包含以下属性 x：当前鼠标所在的画布上的 x 坐标；y：当前鼠标所在的画布上的 y 坐标；target：canvas 对象；toElement：当前 dom 元素；views: Array，当前鼠标所在的视图。

chart.on('plotleave', function(ev) {
  var point = {
    x: ev.x,
    y: ev.y
  };
  // do something
});

plotclick鼠标点击绘图区域时触发的事件。

ev: 事件触发时返回的对象，包含以下属性 x：当前鼠标所在的画布上的 x 坐标；y：当前鼠标所在的画布上的 y 坐标；target：canvas 对象；toElement：当前 dom 元素；views: Array，当前鼠标所在的视图；shape：点击的图表 shape，可能为空；data：选中图形代表的数据，可能为空；geom：选中的图形，可能为空。

plotdblclick绘图区域内的鼠标双击事件。

ev: 事件触发时返回的对象，包含以下属性 x：当前鼠标所在的画布上的 x 坐标；y：当前鼠标所在的画布上的 y 坐标；target：canvas 对象；toElement：当前 dom 元素；views: Array，当前鼠标所在的视图；shape：点击的图表 shape，可能为空；data：选中图形代表的数据，可能为空；geom：选中的图形，可能为空。

itemselected图表元素被选中时触发。

ev: 事件触发时返回的对象，包含以下属性 shape：选中的图形；data：选中图形中的数据；geom：所选中的图表图层。

itemunselected图表元素取消选中时触发。

ev: 事件触发时返回的对象，包含以下属性 shape：取消选中的图形；data：取消选中图形代表的数据；geom：所选中的图表图层。

itemselectedchange图表元素选中发生改变时触发。

ev: 事件触发时返回的对象，包含以下属性 shape：选中的图形；data：选中图形代表的数据；preShape：之前选中的图形；preData：选中图形代表的数据；geom：所选中的图表图层。

tooltipchangetooltip 信息更新改变的时候触发。使用详见教程 tooltip。

ev：事件触发时返回的对象，包含以下属性： tooltip: 当前生成的 tooltip 对象；x: 画布上的 x 坐标；y: 画布上的 y 坐标；items: 当前 tooltip 中的数据项。

tooltipshowtooltip 显示时触发。

ev：事件触发时返回的对象，包含以下属性： tooltip: 当前生成的 tooltip 对象；x: 画布上的 x 坐标；y: 画布上的 y 坐标。

tooltiphidetooltip 隐藏或者消失时触发。

ev：事件触发时返回的对象，包含以下属性： tooltip: 当前生成的 tooltip 对象。

rangeselectstart框选事件开始时触发。 rangeselectend框选事件结束时触发。

ev：事件触发时返回的对象，包含以下属性： x: 结束点 x 的坐标；y: 结束点 y 的坐标；selected: 被选择区域对应的维度即值范围，格式如下：

{
dimX: [min, max], // 当 dimX 值对应为连续数据时，返回值区间
dimY: [yValue1, yValue2, ... , yValueN] // 当 dimY 值对应为分类数据时，返回值
}

view: 鼠标当前所在的视图,rangePlot: 选择框。

                    当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
                        上一篇:
                        下一篇:
            <div class="