根据格式 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中：

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]，它们以任何 [] 类型提供数据，如果您向它们传递数据并且该数据与您的图表数据匹配，它只会显示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>