Странное отображение графика в Chart.js
Нужно построить график. По оси X - даты, по Y - 3 числовых значения. Всё бы ничего, но график как-то странно выглядит. Что я делаю не так?
const data = {
//labels: labels,
datasets: [
{
label: 'Успешные запросы',
backgroundColor: 'rgb(52, 101, 164)',
//borderColor: 'rgb(255, 99, 132)',
data: JSON.parse('[{"x": "2025-07-13", "y": 2}, {"x": "2025-06-28", "y": 74}, {"x": "2025-07-04", "y": 30}, {"x": "2025-07-28", "y": 160}, {"x": "2025-06-18", "y": 7}, {"x": "2025-07-16", "y": 7}, {"x": "2025-05-14", "y": 36}, {"x": "2025-05-12", "y": 1}, {"x": "2025-07-02", "y": 47}, {"x": "2025-08-10", "y": 527}, {"x": "2025-06-27", "y": 1}, {"x": "2025-07-29", "y": 2}, {"x": "2025-05-11", "y": 8}, {"x": "2025-07-11", "y": 11}, {"x": "2025-08-04", "y": 92}, {"x": "2025-08-06", "y": 15}, {"x": "2025-06-25", "y": 22}, {"x": "2025-07-14", "y": 2}, {"x": "2025-07-24", "y": 64}, {"x": "2025-06-19", "y": 2}, {"x": "2025-07-15", "y": 3}, {"x": "2025-07-21", "y": 5}, {"x": "2025-05-04", "y": 2}, {"x": "2025-06-13", "y": 238}, {"x": "2025-07-17", "y": 16}, {"x": "2025-06-08", "y": 29}, {"x": "2025-07-18", "y": 86}, {"x": "2025-07-01", "y": 264}, {"x": "2025-08-08", "y": 1632}, {"x": "2025-05-19", "y": 5}, {"x": "2025-04-28", "y": 58}, {"x": "2025-06-26", "y": 6}, {"x": "2025-07-10", "y": 23}, {"x": "2025-07-31", "y": 9}, {"x": "2025-04-29", "y": 25}, {"x": "2025-05-28", "y": 3}, {"x": "2025-07-30", "y": 3}, {"x": "2025-06-11", "y": 19}, {"x": "2025-08-11", "y": 1}, {"x": "2025-05-06", "y": 14}, {"x": "2025-08-05", "y": 13}, {"x": "2025-08-09", "y": 3791}, {"x": "2025-07-23", "y": 85}, {"x": "2025-04-30", "y": 48}, {"x": "2025-08-07", "y": 394}, {"x": "2025-06-21", "y": 1}, {"x": "2025-05-05", "y": 77}, {"x": "2025-05-18", "y": 39}, {"x": "2025-07-22", "y": 18}, {"x": "2025-05-07", "y": 23}, {"x": "2025-07-08", "y": 1}, {"x": "2025-07-20", "y": 4}, {"x": "2025-06-04", "y": 45}, {"x": "2025-07-26", "y": 6}, {"x": "2025-07-09", "y": 51}, {"x": "2025-06-02", "y": 123}, {"x": "2025-05-02", "y": 1}, {"x": "2025-06-22", "y": 66}, {"x": "2025-06-09", "y": 14}, {"x": "2025-07-07", "y": 29}, {"x": "2025-08-02", "y": 7}, {"x": "2025-08-03", "y": 4}, {"x": "2025-05-15", "y": 34}, {"x": "2025-06-15", "y": 20}, {"x": "2025-06-14", "y": 2}, {"x": "2025-06-17", "y": 111}, {"x": "2025-06-24", "y": 45}, {"x": "2025-07-25", "y": 14}, {"x": "2025-06-12", "y": 132}, {"x": "2025-06-20", "y": 13}, {"x": "2025-05-01", "y": 95}, {"x": "2025-05-03", "y": 1}, {"x": "2025-06-23", "y": 34}, {"x": "2025-06-29", "y": 31}, {"x": "2025-07-27", "y": 5}]'),
},
{
label: 'Поиск через Nominatim',
backgroundColor: 'rgb(237, 212, 0)',
data: JSON.parse('[{"x": "2025-07-13", "y": 2}, {"x": "2025-06-28", "y": 1}, {"x": "2025-06-18", "y": 7}, {"x": "2025-07-16", "y": 7}, {"x": "2025-07-02", "y": 5}, {"x": "2025-05-12", "y": 1}, {"x": "2025-08-10", "y": 3}, {"x": "2025-06-27", "y": 1}, {"x": "2025-07-29", "y": 2}, {"x": "2025-05-11", "y": 5}, {"x": "2025-07-11", "y": 1}, {"x": "2025-07-24", "y": 4}, {"x": "2025-07-14", "y": 2}, {"x": "2025-06-19", "y": 2}, {"x": "2025-07-15", "y": 3}, {"x": "2025-07-21", "y": 5}, {"x": "2025-05-04", "y": 2}, {"x": "2025-06-08", "y": 1}, {"x": "2025-07-17", "y": 1}, {"x": "2025-07-18", "y": 8}, {"x": "2025-07-01", "y": 4}, {"x": "2025-08-08", "y": 11}, {"x": "2025-05-19", "y": 1}, {"x": "2025-04-28", "y": 21}, {"x": "2025-07-10", "y": 7}, {"x": "2025-07-30", "y": 3}, {"x": "2025-04-29", "y": 5}, {"x": "2025-05-28", "y": 3}, {"x": "2025-08-11", "y": 1}, {"x": "2025-05-06", "y": 5}, {"x": "2025-08-05", "y": 1}, {"x": "2025-07-23", "y": 2}, {"x": "2025-04-30", "y": 6}, {"x": "2025-08-07", "y": 5}, {"x": "2025-06-21", "y": 1}, {"x": "2025-05-18", "y": 1}, {"x": "2025-05-05", "y": 3}, {"x": "2025-07-08", "y": 1}, {"x": "2025-07-20", "y": 4}, {"x": "2025-06-04", "y": 2}, {"x": "2025-07-26", "y": 6}, {"x": "2025-07-09", "y": 3}, {"x": "2025-06-22", "y": 2}, {"x": "2025-05-02", "y": 1}, {"x": "2025-06-09", "y": 6}, {"x": "2025-07-07", "y": 1}, {"x": "2025-08-02", "y": 7}, {"x": "2025-08-03", "y": 4}, {"x": "2025-05-15", "y": 7}, {"x": "2025-06-14", "y": 2}, {"x": "2025-06-17", "y": 5}, {"x": "2025-06-24", "y": 1}, {"x": "2025-07-25", "y": 14}, {"x": "2025-06-12", "y": 1}, {"x": "2025-06-20", "y": 1}, {"x": "2025-05-01", "y": 17}, {"x": "2025-05-03", "y": 1}, {"x": "2025-06-23", "y": 1}, {"x": "2025-07-27", "y": 5}, {"x": "2025-07-28", "y": 1}]'),
},
{
label: 'Ошибки',
backgroundColor: 'rgb(204, 0, 0)',
data: JSON.parse('[{"x": "2025-06-23", "y": 40}, {"x": "2025-06-28", "y": 28}, {"x": "2025-06-05", "y": 136}, {"x": "2025-06-29", "y": 32}, {"x": "2025-07-04", "y": 42}, {"x": "2025-06-18", "y": 43}, {"x": "2025-07-06", "y": 22}, {"x": "2025-07-13", "y": 34}, {"x": "2025-07-16", "y": 62}, {"x": "2025-07-25", "y": 99}, {"x": "2025-05-14", "y": 44}, {"x": "2025-05-12", "y": 39}, {"x": "2025-06-07", "y": 22}, {"x": "2025-07-02", "y": 67}, {"x": "2025-05-30", "y": 49}, {"x": "2025-07-27", "y": 29}, {"x": "2025-07-28", "y": 27}, {"x": "2025-08-10", "y": 32}, {"x": "2025-06-27", "y": 47}, {"x": "2025-07-12", "y": 30}, {"x": "2025-05-11", "y": 30}, {"x": "2025-06-01", "y": 29}, {"x": "2025-07-03", "y": 68}, {"x": "2025-07-29", "y": 42}, {"x": "2025-07-11", "y": 40}, {"x": "2025-05-21", "y": 16}, {"x": "2025-08-04", "y": 77}, {"x": "2025-08-06", "y": 40}, {"x": "2025-06-25", "y": 45}, {"x": "2025-07-14", "y": 28}, {"x": "2025-07-24", "y": 27}, {"x": "2025-06-19", "y": 41}, {"x": "2025-05-25", "y": 23}, {"x": "2025-05-31", "y": 126}, {"x": "2025-07-15", "y": 36}, {"x": "2025-05-08", "y": 39}, {"x": "2025-05-04", "y": 29}, {"x": "2025-06-13", "y": 39}, {"x": "2025-06-08", "y": 26}, {"x": "2025-07-17", "y": 34}, {"x": "2025-07-18", "y": 45}, {"x": "2025-07-01", "y": 53}, {"x": "2025-07-21", "y": 39}, {"x": "2025-05-19", "y": 22}, {"x": "2025-08-08", "y": 31}, {"x": "2025-04-28", "y": 31}, {"x": "2025-05-20", "y": 43}, {"x": "2025-06-26", "y": 25}, {"x": "2025-07-10", "y": 44}, {"x": "2025-07-31", "y": 36}, {"x": "2025-04-29", "y": 169}, {"x": "2025-05-28", "y": 20}, {"x": "2025-07-30", "y": 76}, {"x": "2025-06-11", "y": 35}, {"x": "2025-08-11", "y": 13}, {"x": "2025-05-13", "y": 57}, {"x": "2025-05-06", "y": 34}, {"x": "2025-06-30", "y": 133}, {"x": "2025-08-05", "y": 209}, {"x": "2025-05-27", "y": 70}, {"x": "2025-08-09", "y": 30}, {"x": "2025-05-17", "y": 133}, {"x": "2025-04-30", "y": 32}, {"x": "2025-06-10", "y": 59}, {"x": "2025-07-23", "y": 203}, {"x": "2025-06-21", "y": 30}, {"x": "2025-08-01", "y": 81}, {"x": "2025-08-07", "y": 50}, {"x": "2025-07-19", "y": 65}, {"x": "2025-05-05", "y": 42}, {"x": "2025-05-18", "y": 39}, {"x": "2025-07-22", "y": 48}, {"x": "2025-05-26", "y": 32}, {"x": "2025-05-07", "y": 55}, {"x": "2025-07-08", "y": 67}, {"x": "2025-07-20", "y": 38}, {"x": "2025-05-22", "y": 16}, {"x": "2025-06-04", "y": 16}, {"x": "2025-07-26", "y": 34}, {"x": "2025-07-05", "y": 58}, {"x": "2025-07-09", "y": 21}, {"x": "2025-06-22", "y": 23}, {"x": "2025-05-02", "y": 33}, {"x": "2025-06-02", "y": 43}, {"x": "2025-06-09", "y": 21}, {"x": "2025-05-29", "y": 26}, {"x": "2025-07-07", "y": 19}, {"x": "2025-05-23", "y": 32}, {"x": "2025-08-02", "y": 25}, {"x": "2025-06-16", "y": 85}, {"x": "2025-05-09", "y": 176}, {"x": "2025-05-24", "y": 19}, {"x": "2025-08-03", "y": 198}, {"x": "2025-05-15", "y": 46}, {"x": "2025-06-15", "y": 132}, {"x": "2025-06-14", "y": 131}, {"x": "2025-06-17", "y": 42}, {"x": "2025-06-06", "y": 38}, {"x": "2025-06-24", "y": 39}, {"x": "2025-06-12", "y": 52}, {"x": "2025-06-20", "y": 65}, {"x": "2025-05-01", "y": 28}, {"x": "2025-05-03", "y": 22}, {"x": "2025-05-10", "y": 34}, {"x": "2025-05-16", "y": 46}, {"x": "2025-06-03", "y": 45}]'),
}
]
};
const config = {
type: 'line',
//type: 'bar',
data: data,
options: { maintainAspectRatio: false ,
scales: {
xAxes: [{
type: 'time'/*,
time: {
displayFormats: {
day: 'MMM DD, YYYY'
// or any desired format
}
}*/
}]
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<h1>Кол-во запросов по дням</h1>
<div style="height: 90vh; width: 100%;">
<canvas id="myChart"></canvas>
</div>
Источник: Stack Overflow на русском