字体大小不会改变Chart.js版本3.2.1

Question

正在尝试更改 chart.js 版本 3.2.1 中条形图的字体大小。以下不起作用，到目前为止，我在网上找到的选项适用于不同的版本。如何更改以下条形图的字体大小。谢谢。

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 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)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                },
                x: {
                    ticks: {
                        callback: function(val, index) {
                            // Hide the label of every 2nd dataset
                            return index % 2 === 0 ? this.getLabelForValue(val) : '';
                        },
                        color: 'red',
                        fontSize: 70,                    }
                }
            }
        }
    });
    </script>

Answer 1

试试这个

options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                },
                x: {
                    ticks: {
                        callback: function(val, index) {
                            // Hide the label of every 2nd dataset
                            return index % 2 === 0 ? this.getLabelForValue(val) : '';
                        },
                        color: 'red',
                        font:{
                              size:20
                            }                   
                  }
                }
            }
        }

如果您想更改默认字体大小，请使用 Chart.defaults.font.size 选项

https://www.chartjs.org/docs/latest/api/interfaces/fontspec.html

字体大小不会改变Chart.js版本3.2.1

Font size will not change Chart.js version 3.2.1

javascript

chart.js

chart.js3