gpt4 book ai didi

javascript - 是否可以在 JustGage 图表的标题中添加图标?

转载 作者:行者123 更新时间:2023-12-03 10:03:46 25 4
gpt4 key购买 nike

我正在使用 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 (),但这不起作用。我还尝试复制并粘贴图标,结果只是生成了一个正方形。

我想要图表上方的图标,其中当前有一个正方形:

enter image description here

这是演示代码:

<!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

最佳答案

直接使用 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;
}

结果

enter image description here

关于javascript - 是否可以在 JustGage 图表的标题中添加图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30463632/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com