如何更改Chart.JS中标签的字体(族)?

I want to change the font to something snazzier in my Chart.JS horizontal bar chart. I've tried the following, but none of it works:

我想把字体改成更时髦的字体。JS水平条形图。我试过以下方法，但没有一种是有效的:

var optionsBar = {
    . . .
    //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
    //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
    //bodyFontFamily: "'Candara'"
    label: {
        font: {
            family: "Georgia"
        }
    }
};

I also read that this would work:

我也读到过这样的文章:

Chart.defaults.global.defaultFont = "Georgia"

...but where would this code go, and how exactly should it look? I tried this:

…但是这段代码会去哪里呢?它到底应该是什么样子呢?我试着这样的:

priceBarChart.defaults.global.defaultFont = "Georgia";

...but also to no good effet.

…但也没有好效果。

For the full picture/context, here is all the code that makes up this chart:

对于完整的图片/上下文，以下是组成这个图表的所有代码:

HTML

<div class="chart">
    <canvas id="top10ItemsChart" class="pie"></canvas>
    <div id="pie_legend"></div>
</div>

JQUERY

    var ctxBarChart = 
$("#priceComplianceBarChart").get(0).getContext("2d");
    var barChartData = {
        labels: ["Bix Produce", "Capitol City", "Charlies Portland", 
"Costa Fruit and Produce", "Get Fresh Sales",
"Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
        datasets: [
            {
                label: "Price Compliant",
                backgroundColor: "rgba(34,139,34,0.5)",
                hoverBackgroundColor: "rgba(34,139,34,1)",
                data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 
25553]
            },
            {
                label: "Non-Compliant",
                backgroundColor: "rgba(255, 0, 0, 0.5)",
                hoverBackgroundColor: "rgba(255, 0, 0, 1)",
                data: [170, 10, 180, 140, 30, 10, 50, 100, 10]
            }
        ]
    }

    var optionsBar = {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        },
        //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
        //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
        //bodyFontFamily: "'Candara'"
        //Chart.defaults.global.defaultFont = where does this go?
        label: {
            font: {
                family: "Georgia"
            }
        }
    };

    var priceBarChart = new Chart(ctxBarChart, {
        type: 'horizontalBar',
        data: barChartData,
        options: optionsBar
    });
    //priceBarChart.defaults.global.defaultFont = "Georgia";

I even tried this:

我甚至尝试:

CSS

.candaraFont13 {
    font-family:"Candara, Georgia, serif";
    font-size: 13px;
}

HTML

<div class="graph_container candaraFont13">
    <canvas id="priceComplianceBarChart"></canvas>
</div>

...but I reckon the canvas drawing takes care of the font appearance, as adding this made no difference.

…但是我认为画布绘图会考虑字体的外观，因为添加这个没有什么区别。

UPDATE

I tried this and it completely broke it:

我试过这个，它完全把它打破了:

Chart.defaults.global = {
    defaultFontFamily: "Georgia"
}

UPDATE 2

As Matthew intimated, this worked (before any of the chart-specific script):

正如马修所暗示的那样，这一点奏效了(在任何特定于图表的脚本出现之前):

Chart.defaults.global.defaultFontFamily = "Georgia";

3 个解决方案

#1

This should be useful: http://www.chartjs.org/docs/. It says "There are 4 special global settings that can change all of the fonts on the chart. These options are in Chart.defaults.global".

这应该是有用的:http://www.chartjs.org/docs/。它说“有4个特殊的全局设置可以改变图表上的所有字体。这些选项都在图表中。

You'll need to change defaultFontFamily for the font. And defaultFontColor, defaultFontSize, and defaultFontStyle for color, size, etc.

您需要更改字体的defaultFontFamily。和defaultFontColor, defaultFontSize，和defaultFontStyle for color, size，等等。

#2

Change font size,color,family and weight using chart.js

改变字体大小，颜色，家庭和重量使用图表。js

scales: {
        yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}],
        xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}]
        }

See Full code

看到完整代码

<head>
    <title>Chart.js</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <script src="js/Chart.bundle.js"></script>
    <script src="js/utils.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            font-weight:700;  
        }
    </style>
</head>
<body>
    <div id="container" style="width:70%;">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var color = Chart.helpers.color;
        var barChartData = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                    label: 'Completed',
                    // Green
                    backgroundColor: '#4caf50',
                    borderColor: '#4caf50',
                    borderWidth: 1,
                    data: [
                        5, 15, 25, 35, 45, 55
                    ]
                }, {
                    label: 'Created',
                    // Blue
                    backgroundColor: '#1976d2',
                    borderColor: '#1976d2',
                    borderWidth: 1,
                    data: [
                        10, 20, 30, 40, 50, 60
                    ]
                }]

        };

        window.onload = function () {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                        onClick: null
                    },

                    title: {
                        display: true,
                        text: '',
                        fontSize: 20
                    },
                    scales: {
                        yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}],
                        xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}]
                    }
                }
            });
        };
    </script>
</body>

#3

You named the chart priceBarChart in the following part of your code:

您将图表priceBarChart命名为代码的以下部分:

var priceBarChart = new Chart(ctxBarChart, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar
})

Which means that priceBarChart.defaults.global.defaultFont = 'Georgia' will 'dive' into the variable priceBarChart, go into its default properties, change one of its global properties and that one is defaultFont, exactly what you want.

这意味着priceBarChart. global.defaultFont = 'Georgia' t将会“深入”到可变的priceBarChart中，进入它的默认属性，改变它的一个全局属性，那个属性就是defaultFont，这正是你想要的。

But when you apply this code, you basically create the chart with the wrong font and then change it again, which is a bit ugly. What you need to do is tell the chart what the font is beforehand.

但是当你应用这段代码时，你基本上是用错误的字体创建图表，然后再修改它，这有点难看。你需要做的是事先告诉图表字体是什么。

You do this by merging your font declaration with the rest of the options, just like how you did it with your variables barChartData and optionsBar.

您可以通过将字体声明与其他选项合并来实现这一点，就像您使用变量barChartData和optionsBar所做的那样。

After you've created barChartData and optionsBar, create another variable with the name, let's say, defaultOptions, like so:

创建barChartData和optionsBar之后，创建另一个变量，例如，defaultOptions，如下所示:

var defaultOptions = {
    global: {
        defaultFont: 'Georgia'
    }
}

You can see that it has the same structure. You go into the global options, and change its defaultFont property. Now you need to apply it to the created chart at the moment it is created, like so:

你可以看到它有相同的结构。进入全局选项，并更改它的defaultFont属性。现在，您需要在创建图表时将它应用到所创建的图表中，如下所示:

var priceBarChart = new Chart(ctxBarChart, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar,
  defaults: defaultOptions //This part has been added
})

This method of overwriting options is what is being used in almost every JavaScript plugin. When you create a new instance, the plugin copies an object that contains objects that contain objects and so forth. But these objects can be modified with additional options, like barChartData, optionsBar and defaultOptions.

这种覆盖选项的方法几乎适用于所有的JavaScript插件。当您创建一个新实例时，插件会复制一个对象，该对象包含包含对象等。但是这些对象可以通过其他选项进行修改，如barChartData、optionsBar和defaultOptions。

I hope this helps!

我希望这可以帮助!

#1