javascript - Chart.js:更改字体颜色和大小不起作用

Question

我想更改 Y 轴和 X 轴上标签的字体大小和颜色。文档说您只需设置 scaleFontColor 和 scaleFontSize:

    var config = {
        scaleFontColor: "#6E6E6E",
        scaleFontSize: 16,
        type: "line",
        data: {
            labels: labelsFromEntries(entriesAll),
            datasets: []
        },

        options: {
            responsive: true,
            title: {
                display: false
            },
            legend: {
                position: "bottom"
            },
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: "hour",
                        format: "HH:mm",
                        tooltipFormat: "HH:mm",
                        displayFormats: {
                            hour: "HH:mm",
                            day: "HH:mm",
                            week: "HH:mm",
                            month: "HH:mm",
                            quarter: "HH:mm",
                            year: "HH:mm"
                        }
                    },
                    gridLines : {
                        display : false
                    }
                }, ],
                yAxes: [{}]
            },
        }

这对版本:2.1.3 完全没有影响!

那么如何才能真正更改 Y 轴和 X 轴标签的字体颜色和大小呢？

Answer 1

您误解了 Chart.js 的工作原理(我可以理解，因为编辑它实在是一团糟)。

您要编辑的是轴的刻度标签，而不是它们的标题。
然后，您必须知道您要查找的 fontSize 和 fontColor 属性存储在 scales.xAxes.ticks 中。

所以你只需像这样编辑它们:

var options = {
    // ...
    scales: {
        xAxes: [{
            ticks: {
                fontSize: 30,
                fontColor: "red"
            }
        }]
    }
    // ...
}

然后将此 var 添加到您的图表选项中。

<小时/> 这是您想要的完整示例:

var ctx = document.getElementById("myChart");
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: {
        scales: {
            yAxes: [{
                ticks: {
                    // Edit here for the yAxe
                    beginAtZero:true,
                    fontColor: "red",
                    fontSize: 30
                }
            }],
            xAxes: [{
                ticks: {
                    // Edit here for the xAxe
                    fontColor: "#456ef4",
                    fontSize: 20
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
  
<canvas id="myChart" width="400" height="400"></canvas>