2017-06-01 11 views
1

Angular v4.0.1とngx-charts(d3を使用)v5.1.2を使用してWebappを作成し、x軸日付値があります。X軸の日付と時刻をロケール形式で表示するngx-charts/d3

私の問題は、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軸に効果があります!日付と時刻の値はまだ英語のままです。

enter image description here

答えて

1

NGX-チャートのラップは、すべてのD3のトリックはそれで動作しませD3が。ほとんどのNGX-チャートコンポーネントでは、独自の書式設定の機能に接続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) { 
    (<Date>val).toLocaleString('de-DE'); 
    } 
} 
を持っています
関連する問題