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