在区域设置中显示X轴上的日期值，具体取决于ngx-charts / d3格式

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技巧都能使用它。

<!-- 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’)
• 第二个参数是一个options对象，它允许您更改不同日期/时间部分的格式。

从头开始一个新的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之间进行切换：

​

。

​

。

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

​

。

希望这能有所帮助！

Answer 2

我使用的是ngx-chart版本18.0.1，图表有两个属性xAxisTicks和yAxisTicks，它们提供any[]类型的数据，如果你向它们传递数据，且数据与图表数据匹配，它将只显示yAxisTicks Data.for示例，在我的项目中，我只需要显示每天的xAxis，而不是每小时和分钟的数据：

xAxisTicks: string[] = [];

 private addXAxis(xAxisValue: string) {
    if (this.xAxisTicks.find(xAxis => xAxis.slice(0, 10) === xAxisValue.slice(0, 10)) == undefined) {
      this.xAxisTicks.push(xAxisValue);
    }
  }

正如您所看到的，我只是将一些时间添加到我的数组中，因为我使用的是波斯日期，所以我必须这样做

这里是html

      <ngx-charts-line-chart
        [yAxis]="yAxis"
        [xAxis]="true"
        [xAxisTicks]="xAxisTicks"
        [yAxisLabel]="yAxisLabel"
        [results]="lineChartData"
      >
      </ngx-charts-line-chart>