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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

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

回答：

这应该很有用：“有4种特殊的全局设置可以更改图表上的所有字体。这些选项位于Chart.defaults.global”。

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

以上是 如何在Chart.JS中更改标签的字体（字体）？ 的全部内容， 来源链接： utcz.com/qa/430714.html

回到顶部