如何更改Chart.JS中的标签的字体（系列）？ [英] How can I change the font (family) for the labels in Chart.JS?

问题描述

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

  var optionsBar = {
。 。 。 
 // fontFamily：''Candara'，'Calibri'，'Courier'，'serif'
 // bodyFontFamily：'Candara'，'Calibri'，'Courier'，'serif' 
 // bodyFontFamily：''Candara'
标签：{
字体：{
 family：格鲁吉亚
} 
} 
 }; 
  

我也读过这样的结果：

  Chart.defaults.global.defaultFont =Georgia
  

...但是这个代码会去哪里，它究竟应该看起来如何？我试过这个：

  priceBarChart.defaults.global.defaultFont =Georgia; 
  

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

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

 < div class =chart> 
< canvas id =top10ItemsChartclass =pie>< / canvas> 
< div id =pie_legend>< / div> 
< / div> 
  

JQUERY

  var ctxBarChart = 
 $（＃priceComplianceBarChart）。get（0）.getContext（2d）; 
 var barChartData = {
标签：[Bix Produce，Capitol City，Charlies Portland，
Costa Fruit and Produce，获取新鲜销售额，
 bLoffredo East，Loffredo West，Paragon，Piazza Produce]，
数据集：[
 {
 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 = {
 scale：{
 xAxes：[{
 stacked：true 
}]，
 yAxes：[{
 stacked：true 
}] 
}，
 // fontFamily：'Candara'，'Calibri'，'Courier'，'serif'
 // bodyFontFamily：''Candara'，'Calibri'，'Courier'，'serif'
 // bodyFontFamily：'Candara'
 //Chart.defaults.global.defaultFont =这是哪里去的？ 
标签：{
字体：{
 family：格鲁吉亚
} 
} 
}; 
 
 var priceBarChart =新图表（ctxBarChart，{
 type：'horizo​​ntalBar'，
 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; 
  

解决方案

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

您需要更改字体的 defaultFontFamily 。对于颜色，大小和 defaultFontColor ， defaultFontSize 和 defaultFontStyle 等等。

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:

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

解决方案

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

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

这篇关于如何更改Chart.JS中的标签的字体（系列）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！