antd柱形图：标签值显示在图表之外

Question

我有一个相当简单的蚂蚁柱形图，就是这样：

import React from "react";
import ReactDOM from "react-dom";
import { Column } from "@ant-design/plots";

const DemoColumn = () => {
const data = [
{
  type: "Value 1",
  value: 315801
},
{
  type: "Value 2",
  value: 222095
},
{
  type: "Value 3",
  value: 10800
}
];

const config = {
data,
loading: data.length === 0,
xField: "type",
yField: "value",
seriesField: "type",
  yAxis: {
    label: {
      formatter: (v) => v
    }
  },
  xAxis: false,
  height: 200,
  autoFit: false,
  legend: {
    position: "bottom",
    flipPage: false
  },
  interactions: [
    {
      type: "element-active"
    }
  ],
  label: {
     position: "top",
     offsetY: 8,
     formatter: ({ value }) => value
   }
 };
 return <Column {...config} />;
};

ReactDOM.render(<DemoColumn />, document.getElementById("container"));

问题是，值 1 的数量悬在图表之外。我尝试设置填充，但这没有帮助，它实际上把整个图表搞砸了？！？

这也是一个小提琴：https://codesandbox.io/s/cool-microservice-gbrbm9?file=/index.js:0-929

Answer 1

通过添加自己修复了它

appendPadding: 10

---

另一个动态解决方案是这样的：

yAxis: {
            max:  maxValue + 40
        },

maxValue 将是图表的最高值加上一些填充。

Answer 2

AntD GitHub 中有一个 Open Bug [BUG] 如果标签位置设置为“top”，则柱形图的标签将被剪切 官方针对此问题。蚂蚁设计团队的一些成员已经给出了

limitInPlot: true

中

config

的答案。我试过了，但没成功。

我尝试调整

height

道具和

offsetY

内的

lable

道具中的

config

。这对于您实现您想要的目标来说只是一个棘手的选择。

选项 1 -

label: {
  position: "top",
  offsetY: 15, // change offset to this then value will not crop as before but just overlap with chart.
  formatter: ({ value }) => value
}

选项 2 -

xAxis: false,
height: 750, // increase the chart height and it will show the value with a gap. But this will create a scroll. 
autoFit: false,

选项 3 -

您可以混合使用以上两个选项并调整正确的值。这将获得你想要的，无需滚动。以下值得到了这个结果。

xAxis: false,
height: 500, // adjust height
autoFit: false,
legend: {
  position: "bottom",
  flipPage: false
},
interactions: [
  {
    type: "element-active"
  }
],
label: {
  position: "top",
  offsetY: 12, // adjust offset
  formatter: ({ value }) => value
}

这是沙箱代码。

希望这将有助于解决您的问题。