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

Question

我想在 Chart.JS 水平条形图中将字体更改为更时髦的字体。我尝试了以下方法，但 none 行得通：

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

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

对于完整的 picture/context，这里是构成此图表的所有代码：

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>

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

更新

我试过了，它完全坏了：

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

更新 2

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

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

Answer 1

这应该有用：http://www.chartjs.org/docs/。它说 "There are 4 special global settings that can change all of the fonts on the chart. These options are in Chart.defaults.global".

您需要更改 defaultFontFamily 字体。 defaultFontColor、defaultFontSize 和 defaultFontStyle 用于颜色、尺寸等

Answer 2

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

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

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

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

您可以通过将字体声明与其余选项合并来完成此操作，就像您使用变量 barChartData 和 optionsBar.

一样

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

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

可以看到结构是一样的。您进入全局选项，并更改其默认字体属性。现在您需要在创建图表的那一刻将其应用到创建的图表，如下所示：

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

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

希望对您有所帮助！

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

Answer 4

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

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

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

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

How can I change the font (family) for the labels in Chart.JS?

html

javascript

css

jquery

chart.js2

更新

更新 2