Question

我在项目中部分实现了ChartJS，但我无法弄清楚如何更改条形图X轴和Y轴上显示的字体。

我已经阅读了ChartJS documentation，在GitHub上搜索了一些示例等等。我不确定我做错了什么，但我放心，知道解决方案将涉及一行代码并且将会是对我来说是一个令人吃惊的愚蠢疏忽。

此代码绘制我想要的图表，但使用默认字体：

var barChartLanguage = Chart.Bar(myCanvas, {
    data: dataLanguages,
    options: options,
    defaults: defaults
});

我尝试更改defaults中的字体但未成功：

var defaults = {
    global: {
        // example font
        defaultFontFamily: "'Raleway'"
    }
};

我尝试使用options

在轴上更改它

var options = {
    animation: {
        duration: 2000
    },
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true,   // minimum value will be 0.
                suggestedMax: 10
            },
            gridLines: {
                display: false
            },
            pointLabels: {
                fontFamily: "'Raleway'"
            }
        }],
        xAxes: [{
            gridLines: {
                display: false
            }
        }],
    },
};

Answer 1

将ticks.fontFamily添加到xAxes，所以它看起来像这样：

xAxes: [{
  gridLines: {
    display: false
  },
  ticks: {
    fontFamily: "Verdana",
  }
}],

文档：http://www.chartjs.org/docs/#scales

关于jsfiddle的示例：http://jsfiddle.net/4asLpwd5/

Answer 2

从 3.x 版本开始，语法发生了变化。

Chart.js 迁移指南：3.x Migration Guide

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false,
            }
        },
        scales: {
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    font: {
                        family: 'Raleway', // Your font family
                        size: 14,
                    },
                },
            },
            y: {
                beginAtZero: true,
                ticks: {
                    font: {
                        family: 'Raleway', // Your font family
                        size: 14,
                    },
                    // Include a dollar sign in the ticks
                    callback: function (value, index, values) {
                        return '$' + value;
                    },
                },
            }
        }
    }
});

更改ChartJS条形图上的fontFamily

2 个答案: