如何增大Chart.js图例标签及x、y、y2轴刻度数字的字体大小

修改说明 #

你之前参数不生效主要是两个错误：

• Chart.js 3.x 版本的刻度字体参数统一为 ticks.font.size，且ticks配置需要放在坐标轴根节点下，和title同级，你原来把y2的ticks写到了title内部，所以不生效
• 图例属于插件配置，需要在options.plugins下新增legend配置项，通过legend.labels.font.size调整字体大小

下面代码中字体大小我先统一设为18，你可以根据需求自行调整数值。 #

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.min.js"></script>

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

<script type="text/javascript">
    $("#myChart").width( $(window).width() *0.97 );
    $("#myChart").height( $(window).height() * 0.8 );

    var ctx = document.getElementById('myChart').getContext('2d');

    const options = {
        type: 'line',
        data: {
            datasets: [
                {
                    label: 'NaCl',
                    data: natriumChrolideData,
                    borderColor: 'blue',
                    yAxisID: 'y',
                },
                {
                    label: 'Salinity drift',
                    data: salinityDriftData,
                    borderColor: 'red',
                    yAxisID: 'y2',
                },                
            ]
        },
        options: {
            parsing: false,
            normalized: true,
            animation: false,
            responsive: false,
            scales: {
                x: {
                    type: 'time',
                    title: {
                        display: true,
                        text: 'Time (client time zone)',
                        font: {
                            size: 24
                        }
                    },
                    // x轴刻度字体配置
                    ticks: {
                        font: {
                            size: 18
                        }
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'NaCl storage, kg',
                        font: {
                            size: 24
                        }
                    },
                    // y轴刻度字体配置
                    ticks: {
                        font: {
                            size: 18
                        }
                    }
                },
                y2: {
                    title: {
                        display: true,
                        text: 'Salinity drift, %',
                        font: {
                            size: 24
                        }
                    },
                    // y2轴刻度字体配置，ticks从title内部移到同级
                    ticks: {
                        min: 0,
                        font: {
                            size: 18
                        }
                    }
                },
            },
            plugins: {
                // 图例文字大小配置
                legend: {
                    labels: {
                        font: {
                            size: 18
                        }
                    }
                },
                zoom: {
                    pan: {
                        enabled: true,
                        onPanStart({chart, point}) {
                            // alert("pan works!");
                        },
                        mode: 'x',
                    },
                    zoom: {
                        wheel: {
                            enabled: true,
                        },
                        pinch: {
                            enabled: true
                        },
                        mode: 'x',
                    }
                }
            },
        }
    }

    new Chart(ctx, options);
</script>

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