我正在使用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,
}
});
3条答案
按热度按时间piv4azn71#
将图表呈现代码封装在
document.fonts.ready.then
中对我很有效3xiyfsfu2#
图表第一次不会加载您的字体,因为它(还)找不到您的字体。但它第二次可以加载,因为您的字体已经被浏览器缓存。
如果要确保字体正常工作,可以使用隐藏的DOM来预加载字体。
第一个
zkure5ic3#
在创建图表之前等待窗口加载对我来说是有效的: