javascript-ApexCharts仅显示5个标签(键入datetime)
我有一个每天一个值的图表。不知何故,它只在 x 轴上标记了 5 天。我怎样才能让它在设置的最小和最大日期之间的所有日子里都贴上标签(据我所知,tickAmount 不适用于日期时间类型)?
以及如何删除 x 轴上的偏移量,以便每天的点直接位于其标签上方(参见此处的偏移量)?
var options = {
series: [{
name: 'Series1',
data: [
5, 6, 5.5, 7, 1, 3, 4
]
}],
chart: {
height: 250,
type: 'area'
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
colors:['#000000'],
xaxis: {
type: 'datetime',
categories: [
'2022-07-20 00:00:00', '2022-07-21 00:00:00', '2022-07-22 00:00:00', '2022-07-23 00:00:00', '2022-07-24 00:00:00', '2022-07-25 00:00:00', '2022-07-26 00:00:00'
],
min: new Date("2022-07-20 00:00:00").getTime(),
max: new Date("2022-07-26 00:00:00").getTime(),
labels: {
formatter: function(val) {
return moment(new Date(val)).format("ddd");
},
style: {
colors: '#000000',
},
datetimeUTC: false, // Do not convert to UTC
},
},
yaxis: {
labels: {
style: {
colors: '#000000',
},
formatter: function (val) {
return val.toFixed(0)
},
},
tickAmount: 10,
min: 0,
max: 10
},
};
document.getElementById("chart").innerHTML = "";
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="chart"></div>
</body>
</html>
<script src="moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>