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

tag5nh1u  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(177)

我正在使用ChartIdejs,我正在尝试使用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,

            }
        });
piv4azn7

piv4azn71#

将图表呈现代码封装在document.fonts.ready.then中对我很有效

3xiyfsfu

3xiyfsfu2#

图表第一次不会加载您的字体,因为它(还)找不到您的字体。但它第二次可以加载,因为您的字体已经被浏览器缓存。
如果要确保字体正常工作,可以使用隐藏的DOM来预加载字体。
第一个

zkure5ic

zkure5ic3#

在创建图表之前等待窗口加载对我来说是有效的:

window.addEventListener('load', function() {
    // An example of creating a chart, replace with your code:
    var ctx = document.getElementById("myChart").getContext("2d");
    var barchart = new Chart(ctx, config);  
})

相关问题