如何控制刻度标签的大小？

问题描述 投票：0回答：1

我无法控制音阶/x/刻度/大调或小调的标签。 这是一个简单的代码来说明问题。

<!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/[email protected]/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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>

enter image description here

我希望日期以粗体显示，小时以普通字体显示。文档对此功能的描述不够详细。

我错过了什么吗？

javascript chart.js
1个回答
0
投票

是的，有选项

options.scales.x.ticks.fonts
（docs）， （不是
options.scales.x.major.font
）。该选项是scriptable，也就是说，它可以设置为 一个 function，它接收一个 
context
对象作为实际参数，该对象包含有关实际刻度标签的信息， 它应该返回实际的字体，根据该标签的属性，该字体可能会在标签之间发生变化。

主要标签的相关属性 在文档中设置：“

major
将是 在可编写脚本的选项上下文中的刻度上定义”。因此 
font
回调可以设置为：

font: function(context){
    if(context.tick && context.tick.major){
        return {
            weight: 'bold',
        };
    }
}

取自文档样本。

进行此更改的代码片段：

new Chart('myChart', {
    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: function(context){
                        if(context.tick && context.tick.major){
                            return {
                                weight: 'bold',
                            };
                        }
                    }
                }
            },
            y: {
                beginAtZero: true
            }
        }
    }
});
 <canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.