Я работаю с chart.js и moment.js, чтобы показать график с x-axis как время.
У меня были некоторые проблемы с построением этой оси, и я задал этот вопрос,
@ uminder решил это. Это его код,
var sData = {
datasets: [{
label: 'Dataset1',
data: [{
x: '09:00',
y: 88
}, {
x: '09:10',
y: 89
}, {
x: '09:13',
y: 86
}, {
x: '09:23',
y: 86
},
{
x: '09:26',
y: 85
}, {
x: '09:29',
y: 83
}
]
}, {
label: 'Dataset2',
data: [{
x: '09:02',
y: 88
}, {
x: '09:13',
y: 89
}, {
x: '09:14',
y: 86
}, {
x: '09:20',
y: 86
},
{
x: '09:24',
y: 85
}, {
x: '09:29',
y: 83
}
]
}]
}
sData.datasets[0].data = formatData(sData.datasets[0].data)
sData.datasets[1].data = formatData(sData.datasets[1].data)
function formatData(oldData) {
var newData = []
for (var i = 0; i < oldData.length; i++) {
var currentData = {}
currentData.x = moment(oldData[i].x, "HH:mm")
currentData.y = oldData[i].y
newData.push(currentData)
}
return newData
}
var options = {
responsive: true,
scales: {
xAxes: [{
type: 'time',
}]
},
tooltips: {
callbacks: {
title: (tooltipItem, data) => moment(tooltipItem[0].label).format('HH:mm')
}
}
}
var ctx = document.getElementById('bateria_graf').getContext('2d');
let chart = new Chart(ctx, {
type: 'line',
data: sData,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="bateria_graf"></canvas>
Проблема заключается в том, что при выполнении фрагмента x-axis выглядит так, как показано на следующем рисунке,
Когда я вставляю его решение в мою программу, оно выглядит следующим образом:
и когда Я передаю свой собственный datasets, он выглядит так:
Почему формат меняется постоянно? Почему это показывает дату сегодня? Я хочу только hour:minute в формате 24H.
datatsets в третьем изображении, которое я передаю, выглядит так:
[{
'label': 'Node1',
'borderColor': '#4c59b4',
'data': [{'x': '12:22', 'y': 86}, {'x': '12:32', 'y': 86}, {'x': '12:43', 'y': 85}, {'x': '12:53', 'y': 85}]
}, {
'label': 'Node2',
'borderColor': '#786f91',
'data': [{'x': '09:08', 'y': 86}, {'x': '09:19', 'y': 86}, {'x': '09:29', 'y': 86}, {'x': '09:39', 'y': 86}, {'x': '09:49', 'y': 86}, {'x': '10:00', 'y': 86}, {'x': '10:10', 'y': 86}, {'x': '10:20', 'y': 86}, {'x': '10:30', 'y': 86}, {'x': '10:40', 'y': 86}, {'x': '10:51', 'y': 86}, {'x': '11:01', 'y': 86}, {'x': '11:11', 'y': 86}, {'x': '11:21', 'y': 86}, {'x': '11:31', 'y': 86}, {'x': '11:42', 'y': 86}, {'x': '11:52', 'y': 86}, {'x': '12:02', 'y': 86}, {'x': '12:12', 'y': 86}, {'x': '12:22', 'y': 86}, {'x': '12:32', 'y': 86}, {'x': '12:42', 'y': 86}, {'x': '12:52', 'y': 86}, {'x': '13:03', 'y': 86}, {'x': '13:13', 'y': 86}, {'x': '13:24', 'y': 86}, {'x': '13:34', 'y': 86}, {'x': '13:44', 'y': 86}, {'x': '13:54', 'y': 86}, {'x': '14:04', 'y': 86}, {'x': '14:14', 'y': 86}, {'x': '14:24', 'y': 86}, {'x': '14:35', 'y': 86}, {'x': '14:45', 'y': 86}, {'x': '14:55', 'y': 86}, {'x': '15:05', 'y': 87}, {'x': '15:16', 'y': 87}, {'x': '15:26', 'y': 87}, {'x': '15:46', 'y': 87}, {'x': '16:07', 'y': 87}, {'x': '16:17', 'y': 87}, {'x': '16:27', 'y': 87}]
}]