更改ChartJS条形图上的fontFamily

Question

我已经在一个项目中部分实现了ChartJS，但我不知道如何更改条形图X轴和Y轴上显示的字体。

我已经阅读了ChartJS文档，搜索了GitHub上的示例，等等。我不确定我做错了什么，但我确信解决方案将涉及一行代码，这对我来说将是一个非常愚蠢的疏忽。

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

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

我尝试更改默认值中的字体，但没有成功：

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

我试着用选项在轴上更改它：

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

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

Answer 2

将ticks.font家庭添加到xAxes，这样看起来会像这样：

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

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

JSFIDLE上的示例：http://jsfiddle.net/4asLpwd5/