2016-10-04 4 views
0

x軸が時刻を表す折れ線グラフを作成しようとしています。 ChartJSのdisplayFormatsをオーバーライドして、完全なタイムスタンプが各ラベルに表示されるようにしますが、期待通りのフォーマットになるようにします。スニペットの誤差がSOによって導入されるように表示され、手元の問題とは無関係であることをChartJSは、時間軸にラベルを表示するときに日付ではなく時刻を表示します。

var chart = new Chart($('#myChart'), { 
 
    type: 'line', 
 
    data: { 
 
    labels: ['2016-09-05T09:29:06', '2016-10-04T09:29:06'], 
 
    datasets: [{ 
 
     label: 'foo', 
 
     data: [1, 4] 
 
    }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
     xAxes: [{ 
 
      type: 'time', 
 
      time: { 
 
      displayFormats: { 
 
       millisecond: 'DD/MM/YYYY HH:mm:ss', 
 
       second: 'DD/MM/YYYY HH:mm:ss', 
 
       minute: 'DD/MM/YYYY HH:mm:ss', 
 
       hour: 'DD/MM/YYYY HH:mm:ss', 
 
       day: 'DD/MM/YYYY HH:mm:ss', 
 
       week: 'DD/MM/YYYY HH:mm:ss', 
 
       month: 'DD/MM/YYYY HH:mm:ss', 
 
       quarter: 'DD/MM/YYYY HH:mm:ss', 
 
       year: 'DD/MM/YYYY HH:mm:ss' 
 
      }, 
 
      tooltipFormat: 'DD/MM/YYYY HH:mm:ss' 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script> 
 
<canvas id="myChart" width="400" height="400"</canvas>

注:

は、ここに私のコードです。

上記のチャートとやりとりするとき、ツールチップに正しい形式のタイムスタンプが表示されます。だから、私は私の提案したフォーマッタが正しいと思うし、その情報はChartJS内で利用可能です。

質問:

x軸には、ラベルの日付のみが表示されます。ラベルの時間部分は削除され、ゼロとして表されます。どうして?どのようにフルタイムを表示できますか?

答えて

0

私はばかです。

x軸を時間スケールとして表すと、ラベルはデータポイントに対応して1:1になり、それはどの日付/時間であるかの広範な一般化に対応します。 ChartJSは最も近い日に四捨五入されているため、時間は00:00:00です。

関連する問題