更改ChartJS条形图上的fontFamily

Question

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

我已经阅读了ChartJS文档,在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 迁移指南

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