web-dev-qa-db-ja.com

Chart.js v2でx軸の時間スケール値をフォーマットする方法

options.scales.xAxes.time.tooltipFormatを介して折れ線グラフのデータポイントにカーソルを合わせるとツールチップを書式設定できますが、x軸の目盛りラベルに対しては表示できないようです。私のdata.labelsは、モーメントオブジェクトの配列です。それらは"MMM DD, YYYY"（2012年2月23日など）として表示されますが、年を削除したいです。

chart.js
40
wetjosh

選択したすべての時間単位のdisplayFormatをMMM DDに設定するだけです

options: {
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        displayFormats: {
           'millisecond': 'MMM DD',
           'second': 'MMM DD',
           'minute': 'MMM DD',
           'hour': 'MMM DD',
           'day': 'MMM DD',
           'week': 'MMM DD',
           'month': 'MMM DD',
           'quarter': 'MMM DD',
           'year': 'MMM DD',
        }
        ...

すべてのユニットの表示形式をMMM DDに設定していることに注意してください。より良い方法は、データの範囲とチャートサイズを制御できる場合、ユニットを強制することです。

options: {
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'day',
        unitStepSize: 1,
        displayFormats: {
           'day': 'MMM DD'
        }
        ...

フィドル- http://jsfiddle.net/prfd1m8q/

74
potatopeelings

chart js documentation page tick configuration section に従います。コールバック関数を使用して各ティックの値をフォーマットできます。たとえば、表示される日付のロケールを常にドイツ語に変更したかった。軸オプションの目盛り部分

ticks: {
    callback: function(value) { 
        return new Date(value).toLocaleDateString('de-DE', {month:'short', year:'numeric'}); 
    },
},
17
Moustafa Shama

配列に追加する前に日付をフォーマットできます。それは私がやった方法です。私はAngularJSを使用しました

//日付を標準形式に変換します

var dt = new Date(date);

//日付と月のみを取得し、ラベル配列にプッシュします

$rootScope.charts.mainChart.labels.Push(dt.getDate() + "-" + (dt.getMonth() + 1));

グラフのプレゼンテーションでこの配列を使用します

0
shafeerambatt

異なるユースケースがあり、グラフのデータの開始時間と終了時間の間の長さに基づいて異なるフォーマットが必要です。これが最も簡単なアプローチであることがわかりました

    xAxes = {
        type: "time",
        time: {
            displayFormats: {
                hour: "hA"
            }
        },
        display: true,
        ticks: {
            reverse: true
        },
        gridLines: {display: false}
    }
    // if more than two days between start and end of data,  set format to show date,  not hrs
    if ((parseInt(Cookies.get("Epoch_max")) - parseInt(Cookies.get("Epoch_min"))) > (1000*60*60*24*2)) {
        xAxes.time.displayFormats.hour = "MMM D";
    }
0
Rob Raymond