G2的一些常用配置项

    >  本文介绍下G2的一些常用配置项,

Chart图表的属性

图表的属性直接在代码上介绍,可直接复制到项目上根据实际需求可以选择配置

const chart = new G2.Chart({
    container: 'c1', // 必选 指定图表容器 可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
    width : {number}, // 指定图表宽度
    height : {number}, // 指定图表高度
    padding:[10,20,30,40], //设置图表的内边距,对应css样式padding
    background: {
    	fill: {string}, // 图表背景色
    	fillOpacity: {number}, // 图表背景透明度
    	stroke: {string}, // 图表边框颜色
    	strokeOpacity: {number}, // 图表边框透明度
    	opacity: {number}, // 图表整体透明度
    	lineWidth: {number}, // 图表边框粗度
    	radius: {number}, // 图表圆角大小
	},
	forceFit: {Boolean}, //图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度.
    animate: {Boolean}, //图表动画开关，默认为 true，即开启动画。
})

Chart的常用方法

以下整理了下基本使用的方法,以及参数,详细配置可点击详细配置跳转Chart文档

chart.source(data, scaleConfig)

为图表装载数据,推荐使用这种方式 详细配置

参数

• data
  数据源数据，标准的 JSON 数组或者 DataSet.View 对象。
• scaleConfig
  可选，用于数据字段的列定义，如设置数据的类型，显示别名，时间类型的展示格式等，不同的数字类型的配置项不同，详情可配置属性参考Chart文档 Scale。

chart.axis

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

参数

• chart.axis(false)
  关闭坐标轴

• chart.axis('field', false)
  不展示 field 字段对应的坐标轴。

• chart.axis('field', axisConfig)
  一个对象类型，用于设置坐标轴配置信息，可配置属性如下：

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

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

  label: object |null 设置坐标轴文本的样式。如果该属性值为 null 则表示不展示坐标轴文本。

  title: object |null 设置坐标轴标题的显示样式。如果该属性值为 null 则表示不展示坐标轴标题。

  tickLine: object |null 设置坐标轴的刻度线。如果该属性值为 null 则表示不展示。

  subTickCount: number 设置每两个刻度之间次刻度线的个数，默认为 0，即不展示次刻度线。

  subTickLine: number 设置每两个刻度之间次刻度线的个数，默认为 0，即不展示次刻度线。

  grid: object | null 设置坐标轴网格线的样式，网格线与坐标轴线垂直。如果该属性值为 null 则表示不展示。

chart.legend

配置图表图例。详细配置

参数

• chart.legend(false)
  不显示所有的图例。

• chart.legend('field', false)
  不展示 field 字段对应的图例。

• chart.legend('field', legendConfig)
  为数据字段 field 对应的图例进行配置，如下所示：

  position: string 可设置的值为12个：left-top,left-center,left-bottom,right-top,right-center,right-bottom,top-left,top-center,top-right,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: string 图例标题的显示样式设置，如果值为 null，表示不展示图例标题，默认不展示。

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

  offsetY: number 图例 y 方向的偏移值，数值类型，数值单位为 ‘px’，默认值为 0。

  textStyle: object 用于设置图例项的文本样式。

chart.tooltip

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

参数

• chart.tooltip(false)
  关闭 tooltip 功能。

• chart.tooltip(tooltipConfig)
  是一个对象类型，支持的属性如下：

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

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

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

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

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

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

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

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

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

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

chart图表的形状

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

chart.line()

创建折线图，线，点按照 x 轴连接成一条线，构成线图。详见 Geom。

chart.point()

创建点图，详见 Geom。

chart.path()

创建路径图，无序的点连接而成的一条线。详见 Geom。

chart.area()

创建区域图，填充线图跟坐标系之间构成区域图，也可以指定上下范围。详见 Geom。

chart.interval()

创建柱图，使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。详见 Geom。

chart.polygon()

创建多边形，多边形，可以用于构建热力图、地图等图表类型。详见 Geom。

chart.schema()

创建 K 线、箱型图，详见 Geom。

chart.edge()

创建树图、流程图、关系图，详见 Geom。

chart.heatmap()

创建热力图，详见 Geom。