蚂蚁设计条形图隐藏标签

Question

我在我的React项目中使用ant design条形图

https://codesandbox.io/s/9qmjm0k7yw

文档：https://pro.ant.design/components/Charts

我想以x轴作为日期格式显示数据（例如，2018年9月29日）。如果我显示30天左右，那么所有标签都没有足够的空间，因此看起来很奇怪

我想隐藏条形图的标签。像这样

 if (more than 15 days) chart shows label 
 else hide label

或者我有什么办法可以显示30天的图表，但只能显示10天的标签

您能告诉我如何隐藏标签吗？还有其他建议吗？谢谢进阶

Answer 1

不幸的是，Antd-Pro Charts不支持您要执行的操作。在文档中指出，他们设计图表组件时着重于易用性而非自定义。

但是Antd-Pro图表只是BizCharts（它本身是G2的端口）的简化子集，具有减少的api选项。如果需要复杂的图表选项，请考虑使用父BizCharts库。您可以通过调整BizCharts中的对象来完成所需的操作。

Answer 2

为了开发自己的项目，我强烈建议您将所有软件业务保留在自己的项目中，并仅将第三方库用于自己的业务，而不要操纵软件业务，因为它们只是更改了这些库要应用这些更改，您可能需要做很多工作。 它不仅可以为您提供更高的性能，还可以提高您的开发能力。

对于您的主题，您只需获取一个数组即可处理所需的任何内容，然后将处理后的数组传递给组件

Answer 3

在下面的示例中，我使用了x字段为“ week”和y字段为“ views”的柱形图。我不想在x字段上显示标签。

  render() {
    // console.log(this.state.data)
    const config = {
      data: this.state.data,
      title: {
        visible: true,
        text: 'Your Stats',
      },
      xField: 'week',
      yField: 'views',
      meta: {
        week: {
          alias: " "
        }
      }
    };
    return (
      <React.Fragment>
        <Column {...config} />
      </React.Fragment>
    );
  }

使用的数据如下：

产生了以下结果：