蚂蚁设计条形图隐藏标签答案

【问题标题】：Ant design bar chart hide label蚂蚁设计条形图隐藏标签
【发布时间】：2018-09-21 06:08:34
【问题描述】：

我在我的 react 项目中使用了 ant design 条形图。

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

我想将 x 轴的数据显示为日期格式（例如 29/09/2018）。如果我显示 30 天，它就没有足够的空间来放置所有标签，所以看起来很奇怪。

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

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

或者有什么方法可以让图表显示 30 天，但只显示 10 天的标签？

如何隐藏标签？

【问题讨论】：

标签： reactjs antd

【解决方案1】：

很遗憾，Antd-Pro Charts 不支持您想做的事情。文档中指出，他们设计图表组件的重点是易于使用而不是定制。

但是，Antd-Pro Charts 只是 BizCharts（它本身是 G2 的一个端口）的简化子集，并减少了 api 选项。如果您需要复杂的图表选项，请考虑改用父 BizCharts 库。您可以通过调整 BizCharts 中的对象来做您想做的事情。

【讨论】：

【解决方案2】：

在下面的示例中，我使用了一个柱形图，其中 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>
    );
  }

使用的数据如下：

产生了这样的结果：

【讨论】：

【解决方案3】：

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

对于您的主题，您可以简单地获取一个数组并处理您想要的任何内容并将处理后的数组传递给组件

【讨论】：