Question

我正在使用Chart.js，并且正在尝试使用Google字体。第一次加载页面时，图表使用默认字体，但是如果我重新创建图表，则会加载正确的字体。

如何在第一次加载图表时加载字体？

我的HTML：

<div style="width: 100%;" id="StatsDiv">
    <div id="container" style="position: relative; height:300px; width:600px; background-color:#F9F9F9; padding-top:10px;">
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
</div>

字体的加载：

<link href="https://fonts.googleapis.com/css?family=Asap+Condensed:400,500,600" rel="stylesheet" />

起作用的Javascript：

Chart.defaults.global.defaultFontFamily = 'Asap Condensed';

        var myChart = new Chart(document.getElementById("myChart"), {
            type: 'bar',
            data: {
                labels: [FundsLabel,RequestedLabel],
                datasets: [
                    {
                        label: "Cleared Balance: " + parseFloat(AVBalance).toFixed(2) + " AUD",
                        backgroundColor: "rgba(98,203,49,0.40)",
                        borderColor: "rgba(98,203,49,0.75)",
                        borderWidth: 2,
                        hoverBackgroundColor: "rgba(98,203,49,0.50)",
                        hoverBorderColor: "rgba(98,203,49,1.00)",
                        data: [AVBalance, GreenRequested],
                    },
                    {
                        label: "Pending Balance: " + parseFloat(PDBalance).toFixed(2) + " AUD",
                        backgroundColor: "rgba(231,76,60,0.40)",
                        borderColor: "rgba(231,76,60,0.75)",
                        borderWidth: 2,
                        hoverBackgroundColor: "rgba(231,76,60,0.50)",
                        hoverBorderColor: "rgba(231,76,60,1.00)",
                        data: [PDBalance, RedRequested],
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        stacked: true,
                        gridLines: {
                            display: true,
                            zeroLineColor: '#999999',
                            zeroLineWidth: '1',
                            // color: "rgba(255,99,132,0.2)",
                            color: "rgba(239, 239, 239)",
                        },
                          ticks: {
                              //  min: 0, // it is for ignoring negative step.
                              beginAtZero: true,
                              fontSize: "12",

                                // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
                            }
                    }],
                    xAxes: [{
                        stacked: true,
                        gridLines: {
                            display: false,

                        },

                        barThickness: 120,
                         scaleLabel: {
                             display: true,
                            //labelString: 'Banks'

                        }
                    }]
                },
                maintainAspectRatio: false,

            }
        });

Answer 1

该图表不会第一次加载您的字体，因为它尚未找到您的字体。但是第二次成功，因为您的字体已经被浏览器缓存。

如果要确保字体正常工作，可以使用隐藏的DOM来预加载字体。

.fontPreloader{
    font-family: 'Asap Condensed';
    position: fixed;
    top: -9999px;
    left: -9999px;
}

<div class="fontPreloader">-</div>
<link href="https://fonts.googleapis.com/css?family=Asap+Condensed:400,500,600" rel="stylesheet" />

Answer 2

在document.fonts.ready.then内包装图表呈现代码对我有用

Chart.js-字体仅在重新加载画布后才呈现

2 个答案: