Обычно элементы шкалы даты и времени автоматически расставляются, поэтому настройка maxItems приводит к беспорядку в логике c. Однако, если вам действительно нужно использовать maxItems, пожалуйста, добавьте
normalize : false
рядом с ним (в объекте scaleX). Также, если это приемлемо для вас, чтобы иметь возможность сжимать больше меток, вы можете попробовать формат "%m/%d/%y<br>%g:%i:%s %a".
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
"graphset": [
{
"type": "line",
"backgroundColor": "#FFFFFF",
"title": {
"text": "Outside Temp"
},
"plotarea": {
"margin": "50 100"
},
"plot": {
"marker": {
"size": "1"
},
"preview": {
"type": "area",
"line-color": "#0099ff",
"line-width": 2,
"line-style": "dotted",
"background-color": "#99cc00",
"alpha": 1,
"alpha-area": 0.1
}
},
"scaleX": {
normalize: false,
"autoFit": false,
"label": {
"text": "Date/Time"
},
"transform": {
"type": "date",
"all": "%m/%d/%y %g:%i:%s %a"
},
maxItems: 3,
itemsOverlap: true,
"step": "minute",
"max-value": 1585238400000,
"zooming": true
},
"scaleY": {
"label": {
"text": "°F"
},
"minorGuide": {
"lineColor": "#7F8C8D",
"lineWidth": 3
},
"minorTick": {
"lineColor": "#7F8C8D"
},
"minorTicks": 1,
"tick": {
"lineColor": "#7F8C8D",
"lineWidth": 1
},
"zooming": false
},
"crosshairX": {
"marker": {
"alpha": 0.5,
"size": "7px"
},
"plotLabel": {
"borderRadius": "3px",
"multiple": true
},
"scaleLabel": {
"backgroundColor": "#53535e",
"borderRadius": "3px"
}
},
"preview": {
"adjustLayout": true,
"borderColor": "#000000",
"backgroundColor": "#EAEDED",
"label": {
"fontColor": "#CD5C5C"
},
"live": false,
"mask": {
"backgroundColor": "#7F8C8D"
}
},
"series": [
{
"values": [
[1585227652204, 38],
[1585227712217, 38],
[1585227772231, 38],
[1585227832245, 38],
[1585227892259, 38],
[1585227952271, 38],
[1585228012285, 38],
[1585228072299, 38],
[1585228132312, 38],
[1585228192327, 38],
[1585228252340, 39],
[1585228312353, 39],
[1585228372366, 39],
[1585228492394, 39],
[1585228552408, 39],
[1585228612421, 39],
[1585228672435, 39],
[1585228732448, 39],
[1585228792462, 39],
[1585228852476, 39],
[1585228912490, 39],
[1585228972504, 39],
[1585229032516, 39],
[1585229092529, 40],
[1585229152544, 40],
[1585229212556, 40],
[1585229272571, 40],
[1585229332589, 40],
[1585229392599, 40],
[1585229452611, 40],
[1585229512624, 40],
[1585229572638, 40],
[1585229632652, 40],
[1585229692666, 40],
[1585229752680, 40],
[1585229812693, 40],
[1585229872707, 40],
[1585229932722, 40],
[1585229992734, 41],
[1585230052747, 41],
[1585230112761, 41],
[1585230172775, 41],
[1585230232789, 41],
[1585230292801, 41],
[1585230352814, 41],
[1585230412828, 41],
[1585230472843, 41],
[1585230532856, 41],
[1585230592869, 41],
[1585230652883, 41],
[1585230712899, 41],
[1585230772910, 41],
[1585230832924, 41],
[1585230892938, 41],
[1585230952951, 42],
[1585231012969, 42],
[1585231072979, 42],
[1585231132992, 42],
[1585231193011, 42],
[1585231253019, 42],
[1585231313033, 42],
[1585231373046, 42],
[1585231433060, 42],
[1585231493073, 42],
[1585231553087, 42],
[1585231613101, 42],
[1585231673114, 42],
[1585231733127, 42],
[1585231793142, 42],
[1585231853155, 43],
[1585231913169, 43],
[1585231973181, 43],
[1585232033196, 43],
[1585232093209, 43],
[1585232153222, 43],
[1585232213237, 43],
[1585232273249, 43],
[1585232333264, 43],
[1585232393276, 43],
[1585232453292, 43],
[1585232513305, 43],
[1585232573317, 43],
[1585232633332, 43],
[1585232693345, 44],
[1585232753359, 44],
[1585232813372, 44],
[1585232873386, 44],
[1585232933400, 44],
[1585232993414, 44],
[1585233053426, 44],
[1585233113440, 44],
[1585233233467, 44],
[1585233293482, 44],
[1585233353494, 44],
[1585233413509, 44],
[1585233473522, 44],
[1585233533535, 44],
[1585233593548, 44],
[1585233653562, 45],
[1585233713576, 45],
[1585233773591, 45],
[1585233833604, 45],
[1585233893617, 45],
[1585233953631, 45],
[1585234013644, 45],
[1585234073658, 45],
[1585234133671, 45],
[1585234193685, 45],
[1585234253698, 45],
[1585234313714, 45],
[1585234373724, 45],
[1585234433740, 45],
[1585234493752, 46],
[1585234553766, 46],
[1585234613779, 46],
[1585234673793, 46],
[1585234733806, 46],
[1585234793820, 46],
[1585234853834, 46],
[1585234913847, 46],
[1585234973862, 46],
[1585235033874, 46],
[1585235093889, 46],
[1585235153902, 46],
[1585235213917, 46],
[1585235273929, 46],
[1585235333943, 46],
[1585235393956, 47],
[1585235453969, 47],
[1585235513984, 47],
[1585235573998, 47],
[1585235634011, 47],
[1585235694024, 47],
[1585235754037, 47],
[1585235814051, 47],
[1585235874065, 47],
[1585235934079, 47],
[1585235994092, 47],
[1585236054106, 47],
[1585236114120, 47],
[1585236174132, 47],
[1585236234147, 47],
[1585236294159, 47],
[1585236354173, 47],
[1585236414187, 47],
[1585236474202, 47],
[1585236534214, 47],
[1585236594228, 47],
[1585236654241, 47],
[1585236714254, 47],
[1585236774270, 47],
[1585236834283, 47],
[1585236894297, 47],
[1585236954309, 47],
[1585237014325, 47],
[1585237074336, 47],
[1585237134349, 47],
[1585237194365, 47],
[1585237254378, 47],
[1585237314391, 47],
[1585237374404, 47],
[1585237434419, 47],
[1585237494432, 47],
[1585237554446, 47],
[1585237614460, 47],
[1585237674472, 47],
[1585237734487, 47],
[1585237794499, 47],
[1585237854513, 47],
[1585237914527, 47],
[1585237974541, 47],
[1585238034555, 47],
[1585238094568, 47],
[1585238154581, 48],
[1585238214595, 48],
[1585238274608, 48],
[1585238334623, 48],
[1585238394636, 48]
]
}
]
}
]
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
.zc-html, .zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
<!DOCTYPE html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body class="zc-body">
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>