时间戳

首页 > 解决方案 > 如何在 igx-data-chart 中多行设置轴标签？

ignite-ui-angular - 如何在 igx-data-chart 中多行设置轴标签？

问题描述

我需要自定义我的 x 轴标签，以便它以两行显示标签。我试过这个：

let labelFormat = new IgxTimeAxisLabelFormatComponent(); 
labelFormat.format = "dd/MM/yyyy" + "\n" + "hh:mm:ss"; 
this.xAxis.labelFormats.add(labelFormat);

但结果是它保持在一行，如下所示：

X 轴在一条线上.

你有什么建议吗？

标签： ignite-ui-angular

解决方案

不幸的是，我认为仅仅通过 API 是不可能的。标签格式方法应用于常见格式，如“MM/dd/yy”或您正在使用的格式。但是，如果你想改变标签的实际外观，那么formatLabel应该是遵循的路径。在为您创建示例时，我意识到返回值是字符串类型，因此最终结果将不再适合您。

public xAxis_FormatLabel(item: any) {
    return item.Country + " \n" + "some other string";
  }

现场演示： https ://stackblitz.com/edit/github-exckfz-bsvpqs?file=src%2Fapp%2Fdata-chart-type-stacked-column-series%2Fdata-chart-type-stacked-column-series.component .ts

在这里您可以找到与轴相关的所有设置

推荐阅读