> 本文介绍下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。
