logo标签列表

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

javascriptjqueryhtmlcsschart.js2
18

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

：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";
抱歉，我已经退出了编程，并且无法访问那些旧代码。 - B. Clay Shannon-B. Crow Raven
1
可行的解决方案：https://dev59.com/tFkS5IYBdhLWcg3woIFR#48580585 - Billu
4个回答
21
这应该很有用：http://www.chartjs.org/docs/。它指出：“有四个特殊的全局设置可以改变图表中所有字体的样式。这些选项在 Chart.defaults.global 中。”
您需要更改 defaultFontFamily 以更改字体。并且通过更改 defaultFontColor、defaultFontSize 和 defaultFontStyle 来更改颜色、大小等等。
在哪里？我猜测是用我的图表名称替换“Chart”，但那并没有起作用。 - B. Clay Shannon-B. Crow Raven
6
看起来您不需要将“Chart”更改为您的图表名称。我注意到您有“Chart.defaults.global.defaultFont =“ Georgia””。如果将其更改为“Chart.defaults.global.defaultFontFamily =“ Georgia””，该行代码应该可以工作。 - Matthew Campbell
您可以将字体系列添加到选项中：{ legend: { labels: { fontFamily: 'FontYouWant' } },...}这是一个链接：https://www.chartjs.org/docs/latest/general/fonts.html - matoneski
10

使用 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>
10
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插件所使用。当你创建一个新实例时，插件会复制一个包含对象、子对象等的对象。但是这些对象可以通过添加额外的选项进行修改，比如barChartData、optionsBar和defaultOptions。
希望这能帮到你！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接