如何控制Chart.js中坐标轴主次刻度标签的样式？

我无法控制scales/x/ticks/major或minor的标签样式，期望日期刻度标签为粗体，小时刻度标签为普通字体，但相关配置未生效。以下是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Major Ticks in Bold, Minor Ticks Normal</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0"></script>

</head>
<body>

<canvas id="myChart"></canvas>

<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['2023-10-01', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05'],
            datasets: [{
                label: 'Sample Data',
                data: [10, 20, 15, 25, 18],
                borderColor: 'blue',
                borderWidth: 2,
                fill: false,
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'hour',
                        displayFormats: {
                            day: 'YYYY/MM/DD',
                            hour: 'HH:MM'
                        }
                    },
                    ticks: {
                        major: {
                            enabled: true,
                            font: {
                                weight: 'bold'  // Major ticks in bold
                            }
                        },
                        minor: {
                            font: {
                                weight: 'normal'  // Minor ticks in normal weight
                            }
                        }
                    }
                },
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

</body>
</html>

请问我是否遗漏了某些配置？

你遗漏了指定时间轴的Major刻度单位，Chart.js需要明确知道哪些时间刻度属于Major级别，才能应用对应的样式。修改配置如下：

1. 在time配置中添加major.unit: 'day'，标记天级别的刻度为Major
2. 确保ticks.major.enabled保持为true

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Major Ticks in Bold, Minor Ticks Normal</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0"></script>

</head>
<body>

<canvas id="myChart"></canvas>

<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['2023-10-01', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05'],
            datasets: [{
                label: 'Sample Data',
                data: [10, 20, 15, 25, 18],
                borderColor: 'blue',
                borderWidth: 2,
                fill: false,
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'hour',
                        major: {
                            unit: 'day' // 标记天级刻度为Major
                        },
                        displayFormats: {
                            day: 'YYYY/MM/DD',
                            hour: 'HH:MM'
                        }
                    },
                    ticks: {
                        major: {
                            enabled: true,
                            font: {
                                weight: 'bold' // 天级刻度标签粗体
                            }
                        },
                        minor: {
                            font: {
                                weight: 'normal' // 小时级刻度标签普通字体
                            }
                        }
                    }
                },
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

</body>
</html>

关键说明 #

• time.major.unit用于定义哪些时间单位的刻度属于Major级别，这里设置为day后，所有日期（天）刻度会被标记为Major
• 此时ticks.major下的字体样式会自动应用到这些Major刻度标签，剩下的小时刻度则默认使用ticks.minor的样式（或全局ticks样式）

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