首页 > 解决方案 > 如何在胜利折线图 X 轴标签中换行或插入“换行”字符

问题描述

当胜利折线图显示 x 轴标签时,标签在一行上,我想显示带有文本换行的标签。请参阅下面的两张图片以了解它当前正在做什么以及我希望它做什么。

目前正在发生什么 当前图表

下面的图片是我想要发生的事情。我想要什么 我想要的是

我在 tickFormat 中创建了一个函数来提供自定义标签文本,并且该部分正在工作。

<VictoryAxis fixLabelOverlap={true} tickFormat={t => this.formatLabel(t)} />

formatLabel = (t) => {
    var x = new Date(t);
    var s = x.getHours() + ":" + x.getMinutes() + (x.getMonth() + 1) + '/' + x.getDate();
    return s;
  }

标签: react-nativevictory-charts

解决方案


您应该能够使用换行符“\n”创建一个新行

formatLabel = (t) => {
  var x = new Date(t);
  var s = x.getHours() + ":" + x.getMinutes() +'\n'+ (x.getMonth() + 1) + '/' + x.getDate();
  return s;
}

推荐阅读