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添加到图表选项中。

<小时/> 以下是您想要的完整工作示例：

＆＃13;

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
                }
            }]
        }
    }
});

＆＃13;

<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>

＆＃13;

Answer 2

您应该查看最新的文档：http://www.chartjs.org/docs/。

可以通过更改scaleLabel对象

来设置字体大小

        scales: {
            xAxes: [{
                type: "time",
                gridLines : {
                    display : false
                },
                scaleLabel : { fontColor: '#6E6E6E', fontSize:16 }
            }],
        },

Chart.js：Chaing字体颜色和大小不起作用

2 个答案: