antvis/G2

有计划支持图形(文本等其他元素也算)层叠顺序的控制吗? #3757

zhujudong posted onGitHub

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

背景:需要灵活设置X轴标签位置,当标签设置在图形内时,标签会被图形覆盖(如下图) image 对应配置:

import { Chart } from '@antv/g2';

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);
chart.tooltip({
  showMarkers: false
});

chart
  .interval()
  .position('year*value')
  .color('year');

// 设置X轴位置偏移
chart.axis('year',{
  label:{
    offset: -15,
    style:{
      fill: '#000'
    },
  },
})

chart.interaction('element-highlight');
chart.interaction('element-list-highlight');
chart.interaction('legend-highlight');
chart.interaction('axis-label-highlight');

chart.render();

期望解决方案:提供控制层叠循序的配置

What does the proposed API look like?

<!-- generated by antv-issue-helper. DO NOT REMOVE -->


为什么希望 x 轴标签展示在上方呢?可以看下你的原始诉求,提供其它的建议方案。

目前绘图层有三层:backgroundGroup、middleGroup、foreGroup(axis 等组件是属于 backgroundGroup 的,element 等图形元素是在 middleGroup)依次展示。目前应该是不允许去调整这三层的顺序的。

posted by visiky about 3 years ago

我的原始诉求是想灵活设置X轴标签位置,主要位置有三种:图形内部、图形上方、X轴下方(默认)

posted by zhujudong about 3 years ago

在 4.x 中很难处理,在 G2 5.0 中可以通过 spec 顺序来决定。

posted by hustcc over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests