在X轴上以区域设置形式显示日期值，具体取决于格式ngx-charts/d3 [英] Show Date-Values on X-Axis in locale depending format ngx-charts / d3

问题描述

我有一个使用Angular v4.0.1和ngx-charts(使用d3)v5.1.2的Webapp，创建了一个线形图，其中x轴具有日期值.

I have a Webapp using Angular v4.0.1 and ngx-charts (uses d3) v5.1.2 creating a line-chart where the x-axis has date-values.

我的问题是x轴未显示德国时间格式.因此，我了解了如何设置d3的语言环境格式:

My Problem is that the x-axis does not show the german time-format. So I found out how I can set locale formatting for 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轴生效！日期和时间值仍为英文格式.

But this has now effect for the x-axis! The date and time-value are still in english format.

推荐答案

尽管ngx-charts可以包装d3，但并非所有d3技巧都可以使用它.大多数ngx-charts组件都有一个xAxisTickFormatting输入，您可以将其连接到自己的格式设置功能，例如:

Although ngx-charts wraps d3 not all d3 tricks work with it. Most ngx-charts components have an xAxisTickFormatting input that you connect to your own formatting function, e.g.:

<!-- 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项目，以进行全面演示...

Starting a new Angular project from scratch to demo this fully...

$ 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中:

In 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中:

In 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中:

Finally, in 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之间进行切换:

What we've done so far enables you to switch between the out-of-the-box languages for an ngx-rocket application, en-US and fr-FR:

.

.

您可以添加一些基本的管道和转换，以也可以切换到de-DE:

You can add some basic plumbing and translations to enable switching to de-DE as well:

.

希望这会有所帮助！

这篇关于在X轴上以区域设置形式显示日期值，具体取决于格式ngx-charts/d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！