根据格式 ngx-charts / d3 以语言环境在 X 轴上显示日期值

Question

我有一个 Webapp 使用 Angular v4.0.1 和 ngx-charts（使用 d3）v5.1.2 创建一个折线图，其中 x 轴具有日期值。

我的问题是 x 轴不显示德国时间格式。所以我发现了如何为 d3 设置语言环境格式：

import * as d3 from "d3";

import * as formatDE from "d3-format/locale/de-DE.json";
import * as timeFormatDE from "d3-time-format/locale/de-DE.json";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    var formatBefore = d3.timeFormat("%A");
    console.log('Before: '+formatBefore(new Date));
    // output: Thursday -> OK

    d3.formatDefaultLocale(formatDE);
    d3.timeFormatDefaultLocale(timeFormatDE);

    var formatAfter = d3.timeFormat("%A");
    console.log('After: '+formatAfter(new Date));
    // output: Donnerstag -> YES, nice
  }
}

但这现在对 x 轴有效！日期和时间值仍为英文格式。

Answer 1

尽管 ngx-charts 包装了 d3，但并非所有 d3 技巧都适用于它。大多数 ngx-charts 组件都有一个xAxisTickFormatting输入，您可以将其连接到自己的格式化函数，例如：

<!-- some-component.html -->
<ngx-charts-line-chart ... [xAxisTickFormatting]="dateTickFormatting" ...>
</ngx-charts-line-chart>

// some-component.ts
function dateTickFormatting(val: any): string {
  if (val instanceof Date) {
    return (<Date>val).toLocaleString('de-DE');
  }
}

[ 2018-11-03 更新了一个更详细的例子]

注意Date.toLocaleString() 参考：

• 第一个参数是一个语言环境字符串，表示您希望为其格式化的区域性（例如：'en-US'、'de-DE'、'fr-FR'）
• 第二个参数是一个选项对象，允许您更改不同日期/时间部分的格式。

从头开始一个新的 Angular 项目来完全演示这个......

$ npm -g install generator-ngx-rocket@1.3.3

$ mkdir charts-demo; cd charts-demo; ngx new charts-demo
> Web app
> Progressive: Yes
> Bootstrap
> Authentication: No
> Lazy loading: No
> Analytics: No
> Prettier: Yes

$ npm i @swimlane/ngx-charts@10.0.0

在 app.module.ts 中：

$ npm -g install generator-ngx-rocket@1.3.3

$ mkdir charts-demo; cd charts-demo; ngx new charts-demo
> Web app
> Progressive: Yes
> Bootstrap
> Authentication: No
> Lazy loading: No
> Analytics: No
> Prettier: Yes

$ npm i @swimlane/ngx-charts@10.0.0

在 app.component.html 中：

import {NgxChartsModule} from '@swimlane/ngx-charts'; //<<-- Add this
@NgModule({
  imports: [
    ...
    NgbModule,
    NgxChartsModule, //<<-- Add this
    CoreModule,
    ...
  ],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

最后，在 app.component.ts 中：

<router-outlet>
</router-outlet>
<!-- Add this... -->
<ngx-charts-line-chart
    [legend]="true"
    [results]="chartData"
    [view]="[1100,320]"
    [xAxis]="true"
    [xAxisTickFormatting]="this.dateTickFormatting">
</ngx-charts-line-chart>

到目前为止，我们所做的工作使您能够在 ngx-rocket 应用程序的开箱即用语言之间切换，en-US 和 fr-FR：

.

.

您还可以添加一些基本的管道和转换以启用切换到 de-DE：

.

希望这可以帮助！