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

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
请解释一下这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>TOP 5000 电影数据分析</title> <style> ::-webkit-scrollbar { display: none; } html, body { font-family: 'Ubuntu Condensed'; height: 100%; margin: 0; color: rgba(0, 0, 0, 0.85); } </style> </head> <body> <div id="mountNode"></div> </div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="static/g2.min.js"></script> <script src="static/data-set.min.js"></script> <script src="static/jquery-3.2.1.min.js"></script> <script> function generateChart(id, type, xkey, xlabel, ykey, ylabel) { var chart = new G2.Chart({ container: id, forceFit: true, height: 500, padding: [40, 80, 80, 80], }); chart.scale(ykey, { alias: ylabel, min: 0, // max: 3000, tickCount: 4 }); chart.axis(xkey, { label: { textStyle: { fill: '#aaaaaa' } }, tickLine: { alignWithLabel: false, length: 0 } }); chart.axis(ykey, { label: { textStyle: { fill: '#aaaaaa' } }, title: { offset: 50 } }); chart.legend({ position: 'top-center' }); chart.interval().position(`${xkey}*${ykey}`).label(ykey).color('#ffb877').opacity(1).adjust([{ type, marginRatio: 1 / 32 }]); chart.render(); return chart; } </script> <script> let chart = generateChart('mountNode', 'dodge', 'genre', 'genres', 'count', '# movies'); window.onload = () => { $.getJSON("/static/genres.json", d => { chart.changeData(d) }) } </script> </body> </html>
06-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值