返回

javascript-ApexCharts仅显示5个标签(键入datetime)

发布时间:2022-08-01 21:45:06 315
# 前端

我有一个每天一个值的图表。不知何故,它只在 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>

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(1)
按点赞数排序
用户头像