17

我想在我的 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>

查询

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

4 回答 4

21

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

您需要更改defaultFontFamily字体。And defaultFontColor, defaultFontSize, anddefaultFontStyle表示颜色、大小等。

于 2016-09-20T20:54:22.917 回答
9

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

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

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

于 2019-04-12T01:33:11.203 回答
9

使用 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>
于 2018-02-02T10:23:18.177 回答
1

您在代码的以下部分中将图表命名为 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。

我希望这有帮助！

于 2016-09-28T12:29:56.117 回答