ChartJS day类型X轴stepSize不生效问题咨询

问题根源 #

时间类型的X轴，ticks.stepSize 完全不生效——因为时间轴的步长配置逻辑和数值轴不一样，得放到time配置对象里，结合unit和step两个参数来控制时间间隔。比如要设置3天的步长，就把unit设为'day'，step设为3。

调整后的完整代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Chart JS </title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        .chartMenu {
            width: 100vw;
            height: 40px;
            background: #000000;
            color: rgb(0, 0, 0);
        }
        .chartMenu p {
            padding: 10px;
            font-size: 20px;
        }
        .chartCard {
            width: 100vw;
            height: calc(100vh - 40px);
            background: rgba(97, 113, 147, 0.45);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chartBox {
            width: 700px;
            padding: 20px;
            border-radius: 20px;
            border: solid 3px rgba(145, 175, 241, 0.2);
            background: white;
        }
        .input-group {
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div class="chartMenu">

</div>
<div class="chartCard">
    <div class="chartBox">
        <canvas id="myChart"></canvas>
        <div class="input-group">
            <hr>Step size OY
            <input type="number" id="steps" value="3">
        </div>
        <div class="input-group">
            <hr>Step size OX（天）
            <input type="number" id="stepsX" value="2">
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
    // setup
    const data = {
        labels: ['20.04.2022', '25.04.2022', '30.04.2022', '04.05.2022', '09.05.2022', '14.05.2022'],
        datasets: [{
            label: 'Weekly Sales',
            data: [18, 12, 6, 9, 12, 3, 9],
            backgroundColor: [
                'rgba(255, 26, 104, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(0, 0, 0, 0.2)'
            ],
            borderColor: [
                'rgba(255, 26, 104, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgb(173,102,255)',
                'rgba(255, 159, 64, 1)',
                'rgb(0,0,0)'
            ],
            borderWidth: 1
        }]
    };

    // config
    const config = {
        type: 'line',
        data,
        options: {
            scales: {
                x: {
                    type: 'time',
                    autoSkip: false,
                    time: {
                        unit: 'day',
                        parser: 'dd.MM.yyyy',
                        step: 2 // 默认2天间隔
                    }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 3
                    }
                }
            }
        }
    };

    // render init block
    const myChart = new Chart(
        document.getElementById('myChart'),
        config
    );
    const stepsY = document.getElementById('steps');
    const stepsX = document.getElementById('stepsX');
    
    stepsY.addEventListener('input', (e) => {
        stepSizeY(myChart, e)
    });
    
    stepsX.addEventListener('input', (e) => {
        stepSizeX(myChart, e)
    });

    function stepSizeY(chart,e) {
        chart.config.options.scales.y.ticks.stepSize = parseInt(stepsY.value);
        chart.update()
    }

    function stepSizeX(chart,e) {
        chart.config.options.scales.x.time.step = parseInt(stepsX.value);
        chart.update()
    }
</script>
</body>
</html>

关键修改说明 #

1. X轴步长配置迁移：删掉X轴ticks里的stepSize，把步长设置放到time.step中，和time.unit配合使用（这里unit是day，step就是天数）。
2. 添加X轴步长控制：新增输入框用来动态调整X轴的时间间隔，同时添加对应的监听函数stepSizeX，修改time.step后刷新图表。
3. 类型转换：把输入框的字符串值转成整数，避免ChartJS报错。

内容的提问来源于stack exchange，提问作者GTmember