我正在使用 JustGage 制作图表。这是我的 JavaScript:
window.onload = function() {
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 100),
min: 0,
max: 300,
title: "font awesome icon here"
});
};
是否有可能获得 font awesome标题中的图标？我尝试添加 unicode ()，但这不起作用。我还尝试复制并粘贴图标，结果只是生成了一个正方形。
我想要图表上方的图标，其中当前有一个正方形:
这是演示代码:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<title>Auto-adjust</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
text-align: center;
}
#g1, #g2, #g3 {
width:20em; height:15em;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="resources/js/raphael.2.1.0.min.js"></script>
<script src="resources/js/justgage.1.0.1.min.js"></script>
<script>
var g1, g2, g3;
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 100),
min: 0,
max: 300,
title: "trying to get font awesome here"
});
var g2 = new JustGage({
id: "g2",
value: getRandomInt(0, 100),
min: 0,
max: 300,
title: "trying to get font awesome here"
});
var g3 = new JustGage({
id: "g3",
value: getRandomInt(0, 100),
min: 0,
max: 300
title: "trying to get font awesome here"
});
setInterval(function() {
g1.refresh(getRandomInt(50, 300));
g2.refresh(getRandomInt(50, 300));
g3.refresh(getRandomInt(0, 300));
}, 2500);
};
</script>
</head>
<body>
<div id="g1"></div>
<div id="g2"></div>
<div id="g3"></div>
</body>
</html>
最佳答案
直接使用 Font awsome 作为标题的一种方法是使 Gauge 标题颜色与背景颜色相同，使其透明并将 Font 附加到 Gauge 中。需要对位置进行一些 css 样式才能将其放置在中心顶部
演示
https://jsfiddle.net/8uybzx0e/
代码
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 100),
min: 0,
max: 300,
title: "Title",
titleFontColor: "white"
});
$("#g1").append('<i class="fontaw fa fa-user-plus"></i>')
CSS
.fontaw {
position:absolute;
z-index:9999;
top:50px;
left:33%;
font-size:30px;
}
结果
关于javascript - 是否可以在 JustGage 图表的标题中添加图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30463632/