web-dev-qa-db-ja.com

タイムラインの選択に基づいてngx-charts-line-chartのxAxisTickFormattingを変更するにはどうすればよいですか？

デフォルトでは、ティックはタイムラインでの時間範囲の選択に基づいてフォーマットされます。日をまたいでパンすると月が表示され、1日でパンすると時間のみが表示されます。これは素晴らしい！

次に、これらのティックをローカライズしたいと思います。これを行うためにxAxisTickFormattingを提供することもできますが、時間範囲の選択に基づいてフォーマットを設定したいと思います。現在の時間範囲の選択に基づいて、「MMM DD」または「HH：MM」。

このために、時間範囲選択イベントでフォーマット機能を動的に変更する必要があります。そのようなイベントはありますか？または、これを達成する他の方法はありますか？

ngx-charts
7
gerin

日付はd3ロジックに基づいてフォーマットされているようです。それはそのティックに利用可能な精度を使用します。したがって、日付が12/15/2020 11:30:00の場合、精度は分レベルになります。同様に、日付が12/15/2020 00:00:00の場合、精度は日レベルです。これで、それに応じてフォーマットオプションを選択できます。

var locale = 'fr-FR'; // 'en-US'
function formatDate(value) {
  let formatOptions;
  if (value.getSeconds() !== 0) {
    formatOptions = { second: '2-digit' };
  } else if (value.getMinutes() !== 0) {
    formatOptions = { hour: '2-digit', minute: '2-digit' };
  } else if (value.getHours() !== 0) {
    formatOptions = { hour: '2-digit' };
  } else if (value.getDate() !== 1) {
    formatOptions = value.getDay() === 0 ? { month: 'short', day: '2-digit' } : { weekday: 'short', day: '2-digit' };
  } else if (value.getMonth() !== 0) {
    formatOptions = { month: 'long' };
  } else {
    formatOptions = { year: 'numeric' };
  }
  return new Intl.DateTimeFormat(locale, formatOptions).format(value);
}

var dates = ['12/15/2020 11:30:30', '12/15/2020 11:30:00', '12/15/2020 11:00:00', '12/15/2020 00:00:00', '12/13/2020 00:00:00', '12/01/2020 00:00:00', '01/01/2020 00:00:00'];
for (date of dates) {
  console.log(date, '=>', formatDate(new Date(date)));
}

これで、この関数は次のように使用できます。

<ngx-charts-line-chart 
    [xAxis]="true" 
    [xAxisTickFormatting]="formatDate">
</ngx-charts-line-chart>
0
gerin

チャートでは、他の属性の中で、宣言することができます

<ngx-charts-bar-horizontal-normalized
    ...
    [xAxis]="true"
    [xAxisTickFormatting]='formatPercent'
    ...
</ngx-charts-bar-horizontal-normalized>

formatPercentは、次のように記述された.tsファイル（Angularを使用しています）で宣言された関数です。

formatPercent(val) {
    if (val <= 100) {
      return val + '%';
    }
  }

参考のためにドキュメントを確認してください ここ

お役に立てれば。

6
Angelo Bellocco