Question

我正在使用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（＆amp;＃xf023），但这不起作用。我还尝试在图标中复制和粘贴，这样就形成了一个正方形。

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

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

Answer 1

直接使用Font awsome作为标题的一种方法是使Gauge标题颜色与背景颜色相同，使其透明并附加到Gauge the Font中。需要为该位置设置一些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

Answer 2

我明白了。问题出在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"         
  });

感谢所有帮助。

是否可以在JustGage图表的标题中添加图标？

2 个答案: