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 をタイトルとして直接使用する方法の 1 つは、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;
}

結果

ここに画像の説明を入力

于 2015-05-26T16:55:46.813 に答える
0

私はそれを考え出した。問題は、justgage.1.0.1.js のデフォルトのスタイリングにありました。そのファイルに移動して、font-family を 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 に答える