G2的一些常用配置项

最新推荐文章于 2024-07-27 21:53:00 发布

z-robot

最新推荐文章于 2024-07-27 21:53:00 发布

阅读量5.4k

点赞数 3

分类专栏： g2

本文链接：https://blog.csdn.net/z_robot/article/details/107035739

版权

g2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

    >  本文介绍下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，即跟随。