0

我正在使用JustGage制作图表。这是我的javascript：

window.onload = function() {
  var g1 = new JustGage({
    id: "g1", 
    value: getRandomInt(0, 100), 
    min: 0,
    max: 300,
    title: "font awesome icon here"
  });
};

是否有可能在标题中获得一个很棒的字体图标？我尝试添加 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

4

2 回答 2

1

直接使用 Font awsome 作为标题的一种方法是使 Gauge 标题颜色与背景颜色相同，使其透明并附加到 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;
}

结果

在此处输入图像描述

于 2015-05-26T16:55:46.813 回答
0

我想到了。问题出在 justgage.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"         
  });

感谢所有的帮助。

于 2015-05-26T16:58:08.953 回答