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

问题描述 投票：11回答：4

我想在Chart.JS水平条形图中将字体更改为snazzier。我尝试了以下，但没有一个有效：

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>

...但我认为画布绘图会照顾字体外观，因为添加它没有任何区别。

UPDATE

我试过这个，它完全打破了它：

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

更新2

正如马修暗示的那样，这种方法（在任何特定于图表的脚本之前）都有效：

Chart.defaults.global.defaultFontFamily = "Georgia";
javascript jquery html css chart.js2
4个回答
12
投票

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

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

4
投票

使用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'}}]
        }

请参阅完整代码

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

2
投票

如果要将font-family添加到图表对象，则可以将其添加到options对象中。

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

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

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。

我希望这有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.