Question

我有一个使用Angular v4.0.1和ngx-charts（使用d3）v5.1.2的Web应用程序创建一个折线图，其中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() reference：

第一个参数是表示您希望格式化的文化的区域设置字符串（例如：'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中：

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.html中：

<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>

最后，在app.component.ts中：

// ...
export class AppComponent implements OnInit {
  // Add this...
  // Note the Date objects for the names (X Axis values)...
  chartData: any[] = [
    {
      name: 'Series 1',
      series: [
        { name: new Date("2017-12-01"), value: 0 },
        { name: new Date("2018-01-01"), value: 1 },
        { name: new Date("2018-02-01"), value: 1 },
        { name: new Date("2018-03-01"), value: 2 },
        { name: new Date("2018-04-01"), value: 3 },
        { name: new Date("2018-05-01"), value: 5 },
        { name: new Date("2018-06-01"), value: 8 },
        { name: new Date("2018-07-01"), value: 13 },
        { name: new Date("2018-08-01"), value: 21 },
        { name: new Date("2018-09-01"), value: 34 },
        { name: new Date("2018-10-01"), value: 55 },
        { name: new Date("2018-11-01"), value: 89 },
        { name: new Date("2018-12-01"), value: 144 }
      ]
    }
  ];
  constructor(
  // ...
  // in ngOnInit()...
      .subscribe(event => {
        const title = event['title'];
        if (title) {

this.titleService.setTitle(this.translateService.instant(title));
        }
        //Add this: Record the new language...
        environment.defaultLanguage = this.translateService.currentLang;
        //Add this: Refresh the ngx-chart...
        this.chartData = [... this.chartData];
      });
  // ...
  // new method, dateTickFormatting...
  dateTickFormatting(val: any): String {
    if (val instanceof Date) {
      var options = { month: 'long' };
      //return (<Date>val).toLocaleString('de-DE', options);
      return (<Date>val).toLocaleString(environment.defaultLanguage, options);
    }
  }
}

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

en-US

fr-FR

您可以添加一些基本的管道和翻译，以便切换到de-DE：

de-DE

希望这有帮助！

根据格式ngx-charts / d3在区域设置中显示X轴上的日期值

1 个答案: