antvis / G2

📊 The concise and progressive visualization grammar.
https://g2.antv.antgroup.com
MIT License
12.08k stars 1.58k forks source link

分面功能在 rect 模式下对双Y轴的优化 #3251

Open zpz1982 opened 3 years ago

zpz1982 commented 3 years ago

What problem does this feature solve?

双Y轴通常用于线柱混合图,而为了让 line 在 bar 上层,line 必须在 bar 之后添加,所以默认 line 的Y轴在右边。当用户关注点主要在线的变化时,需要把 line 的Y轴变为左边,bar 的Y轴放到右边。目前分面的Y轴优化没有考虑双Y轴时左右Y轴交换以后的情况。开发人员在eachView属性内的优化操作无效,bar 的Y轴只有第一个显示,其他的都被隐藏了,即使bar 的Y轴已经放在右边。

What does the proposed API look like?

分面功能应该允许开发者在eachView属性内自主对坐标轴做优化。可以增加一个niceAxis的布尔属性,为false时分面不主动对坐标轴做优化。

image

hustcc commented 3 years ago

@zpz1982 问题是:分面对于坐标做的左右位置,无法在 eachView 中自定义修改是吗?

求来一个最简 demo,我来复现之后直接修复。

zpz1982 commented 3 years ago

可以修改左右位置,上传图即为默认左右交换后的结果。百分比为line的Y轴,可以看到红框位置不是最优的显示效果。理想状况是坐标轴的label只有最左右两边显示,中间隐藏,目前做不到。左右Y轴交换以后,右边一个图的右轴无法显示,这个应该是facet优化造成的。这不是bug,只是希望能让开发者自主优化坐标轴的显示。

hustcc commented 3 years ago

直接 eachView 中如果不是左右两边的 view,就设置 view.axis(false) ,这个做不到吗?

zpz1982 commented 3 years ago

用一个更简单的情况说明问题:只有一个Y轴,并在eachView中设置把它放到右侧,就会如下图,因为分面强制隐藏了中间和右边2个图的坐标轴。axis 的设置已经不是false,但被分面强制隐藏的坐标轴依然看不到。 image

this.chart.facet('rect', { padding: [30, 50, 30, 50], fields: ['facet'], eachView: (view, facet) => { view.interval().position('x*bar'); view.axis('bar', { position: 'right' });
}, })

zpz1982 commented 3 years ago

官方例子只要加一行代码就可以复现 image

zpz1982 commented 3 years ago

应该是下面代码导致,所以我建议增加一个niceAxis的布尔属性,为false时facet不对坐标做优化。 image