1.配置自定义的颜色列表
chart.color('type',['red','green','yellow'])
2.图例样式说明设置,文档链接https://antv.alipay.com/g2/api/chart.html中的chart.legend方法。
2chart.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 的显示形状
});
网友评论