如何移除ngx-line-chart折线图X轴自动显示的时间内容

解决方案 #

你遇到的情况是ngx-charts的默认逻辑导致的：当检测到X轴字段为Date类型时，组件会根据容器宽度自动生成连续时间刻度，空间充足时会自动插入小时级别的中间刻度，哪怕你的原始数据只有日期级别的记录，也会生成对应插值，所以才会出现不存在的时间点数据。
你可以根据自己的需求选下面任意一种方案解决：

方案1：将X轴字段改为字符串类型（最便捷）

不要把返回的日期字符串转为Date对象，直接处理成你想要的日期格式字符串即可，ngx-charts会将其识别为离散分类，不会自动生成额外时间刻度。修改你的createData方法：

private createData(name: string, totals: BrandDemoTotals[]): any {
    return {
        name,
        series: totals.map((total: BrandDemoTotals) => {
            return {
                // 直接截取日期部分，或者用你想要的格式处理
                name: total.date.slice(0,10),
                value: total.numberOfRecipients,
            };
        }),
    };
}

方案2：保留Date类型，自定义刻度格式化

如果你需要保留Date类型用于时间排序、交互等功能，可以自定义X轴刻度的格式化方法，强制隐藏时间部分：

1. 先在组件代码中新增格式化方法：

// 新增X轴刻度格式化方法
formatXAxisTick(date: Date): string {
  // 自定义输出格式，比如返回 年-月-日 格式
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}

2. 在ngx-line-chart标签上新增格式化属性绑定：

<ngx-charts-line-chart [id]="id" [legend]="legend" [legendPosition]="legendPosition"
    [legendTitle]="legendTitle" [scheme]="colorScheme" [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis" [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel" [timeline]="timeline" [results]="data" *ngIf="!loading && data"
    <!-- 新增这一行 -->
    [xAxisTickFormatting]="formatXAxisTick">
</ngx-charts-line-chart>

如果想要彻底禁止组件自动生成中间插值刻度，可以额外添加[xAxisTicks]属性，传入你自定义的刻度数组：

// 组件中定义自定义刻度数组，取所有数据的日期即可
public customTicks: Date[] = [];

// 处理数据时填充刻度
this.customTicks = totals.map(item => new Date(item.date));

然后在标签上绑定：[xAxisTicks]="customTicks"

内容的提问来源于stack exchange，提问作者r3plica