Я использую библиотеку Chart js для отображения данных в виде линейной диаграммы. Данные отображаются на основе однодневных часов. Теперь проблема в том, что когда я пытаюсь добавить размер шага или любой другой формат для управления отображением данных метки, он не работает с ним.
Я создал один пример кода на jsfiddle, который вы можете отметьте «https://jsfiddle.net/drashti/j1exyt46/15/».
Здесь я добавил данные метки в формате даты и часа и хочу отобразить метку с точностью до 2, но, похоже, она не работает с датой или без даты с данными формата часов на метке. Я не хочу отображать запись данных «7:30» в метке вместо того, чтобы она отображалась только в наборе данных. Кто-нибудь может иметь какие-либо идеи?
Пожалуйста, найдите также пример кода ниже:
var hours = ["12:00 AM","01:00 AM","02:00 AM","02:20 AM","03:00 AM","04:00 AM","05:00 AM","06:00 AM","07:00 AM","08:00 AM","09:00 AM","10:00 AM"];
var label = ["24/04 02:00","24/04 04:00","24/04 06:00","24/04 07:30","24/04 08:00","24/04 10:00","24/04 12:00","24/04 14:00","24/04 16:00","24/04 18:00","24/04 20:00","24/04 22:00","25/04 00:00"];
var config = {
type: 'line',
data: {
labels: label,
datasets: [{
label: 'My First dataset',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [10,20,30,40,50,60,40],
fill: false,
}, {
label: 'My Second dataset',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [10,0,40,50,60,70,0],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
x: {
display: true,
scaleLabel: {
display: true,
labelString: '24-04-2020'
},
ticks: {
precision: 2,
},
},
y: {
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
Спасибо.