g2持续更新

1.配置自定义的颜色列表

chart.color('type',['red','green','yellow'])

2.图例样式说明设置,文档链接https://antv.alipay.com/g2/api/chart.html中的chart.legend方法。

g2持续更新_第1张图片
2

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, // 控制其x坐标位置

dy:10,//控制其y坐标位置

itemWrap:false,// 是否自动换行,默认为 false,true 为自动换行

word:{

fill:'red',

fontSize:14

},// 图例各个子项文本的颜色

back:{

fill:'red'

},// 图例外边框和背景的配置信息

formatter:function(val){

returnval+'%';

},// 格式化图例项的文本显示

marker:'circle','square','bowtie','diamond','hexagon','triangle'// 配置 marker 的显示形状

});

你可能感兴趣的:(g2持续更新)