VisActor/VChart

[Bug] 为formatMethody轴标签添加其他内容，且设置y轴标签靠右后，y轴标签与x轴及网格线重叠。

Closed this issue · 3 comments

hmj-0v0 commented

Version

1.12.14

Link to Minimal Reproduction

https://www.visactor.io/vchart/demo/bar-chart/group-column

Steps to Reproduce

官网示例中可复现。

const spec = {
type: 'bar',
data: [{
id: 'barData',
values: [
{ type: 'A+', value: 10 },
{ type: 'A', value: 14 },
{ type: 'B+', value: 15 },
{ type: 'B', value: 4 },
{ type: 'C+', value: 5 },
{ type: 'C', value: 7 },
],
}],
xField: 'type',
yField: 'value',
axes: [
{
type: 'linear',
orient: 'right',
label: {
formatMethod: (text) => ${text}人,
style: {
textAlign: 'right',
},
},
},
],
};

Current Behavior

image

Expected Behavior

应该不重叠。

Environment

No response

Any additional comments?

No response

xile611 commented

@hmj-0v0 不能修改 textAlign ，轴标签这里涉及到很多算法，不能修改这个textAlign

hmj-0v0 commented

@hmj-0v0 不能修改 textAlign ，轴标签这里涉及到很多算法，不能修改这个textAlign

那请问还有别的方式能做靠右对齐么？

xile611 commented

@hmj-0v0

axes: [
    {
      type: 'linear',
      orient: 'right',
      label: {
        containerAlign: 'right',
        formatMethod: (text) => `${text}人`,
        style: {
          // textAlign: 'right',
        }
      }
    }
  ],

文档：
https://www.visactor.io/vchart/option/barChart-axes-linear#label.containerAlign

这样可以实现右轴的右对齐

  • 👍1
  • 🎉1