如何更改 Chart.JS 中标签的字体（系列）？答案

【问题标题】：How can I change the font (family) for the labels in Chart.JS?如何更改 Chart.JS 中标签的字体（系列）？
【发布时间】：2016-09-20 20:46:46
【问题描述】：

我想在我的 Chart.JS 水平条形图中将字体更改为更时髦的字体。我尝试了以下方法，但都不起作用：

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

我还读到这会起作用：

Chart.defaults.global.defaultFont = "Georgia"

...但是这段代码会去哪里，它到底应该是什么样子？我试过这个：

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

...但也没有什么好的效果。

对于完整的图片/上下文，这是构成此图表的所有代码：

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

我什至试过这个：

CSS

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

HTML

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

...但我认为画布绘图会处理字体外观，因为添加它没有任何区别。

更新

我试过了，它完全破坏了它：

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

更新 2

正如 Matthew 所暗示的，这有效（在任何特定于图表的脚本之前）：

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

【问题讨论】：

抱歉，我从编程退休了，无法访问旧代码。
工作解决方案：stackoverflow.com/a/48580585/7186739

标签： javascript jquery html css chart.js2

【解决方案1】：

这应该很有用：http://www.chartjs.org/docs/。它说“有 4 种特殊的全局设置可以更改图表上的所有字体。这些选项在 Chart.defaults.global 中”。

您需要更改字体的defaultFontFamily。以及defaultFontColor、defaultFontSize 和defaultFontStyle 用于颜色、大小等。

【讨论】：

在哪里？我通过使用我的图表名称替换“图表”来猜测它，但没有奏效。
您似乎不需要将Chart 更改为您的图表名称。我注意到你有Chart.defaults.global.defaultFont = "Georgia"。如果是Chart.defaults.global.defaultFontFamily = "Georgia"，该行应该可以工作。
您可以将字体系列添加到 ...options: { legend: { labels: { fontFamily: 'FontYouWant' } },...} 这是一个链接：chartjs.org/docs/latest/general/fonts.html跨度>

【解决方案2】：

如果您想将字体系列添加到图表对象中，则可以将其添加到选项对象中。

options: {
  legend: {
    labels: { 
      fontFamily: 'YourFont'
    }
  }...}

这是文档的链接：https://www.chartjs.org/docs/latest/general/fonts.html

【讨论】：

【解决方案3】：

使用 chart.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'}}]
        }

查看完整代码

<!doctype html>
<html>

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

</html>

【讨论】：

【解决方案4】：

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

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

这意味着priceBarChart.defaults.global.defaultFont = 'Georgia' 将“潜入”变量 priceBarChart，进入其默认属性，更改其全局属性之一，即 defaultFont，这正是您想要的。

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

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

在创建 barChartData 和 optionsBar 之后，创建另一个名称为 defaultOptions 的变量，如下所示：

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

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

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

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

我希望这会有所帮助！

【讨论】：