是否可以在JustGage图形的标题中添加图标？
是否可以在JustGage图形的标题中添加图标？
提问于 2015-05-27 00:05:40
我正在用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>现场演示：http://jsbin.com/layoku/1/edit?html,js,output
回答 2
Stack Overflow用户
发布于 2015-05-27 00:55:47
直接使用Font awsome作为标题的一种方法是使仪表盘标题颜色与背景颜色相同，以便其透明并附加到仪表盘字体中。需要为该位置设置一些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;
}结果
Stack Overflow用户
发布于 2015-05-27 00:58:09
我想通了。问题出在justgage.1.0.1.js gage.1.0.1.js中的默认样式中。我必须进入该文件并将字体系列从Arial更改为Font Awesome：
// title
this.txtTitle = this.canvas.text(this.params.titleX, this.params.titleY,this.config.title);
this.txtTitle. attr({
"font-size":this.params.titleFontSize,
"font-weight":"bold",
"font-family":"FontAwesome", //changed this line
"fill":this.config.titleFontColor,
"fill-opacity":"1"
});谢谢你的帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30463632
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号