0

Wijmo ライブラリの標準の全円 RadialGauge を半円のものに変更したい。私はドキュメンテーションに目を通し、「顔」プロパティをオーバーライドすることでこれを実行できることを知っています。

Angularでこれを行う方法がわかりません。HTML でプロパティ フェイスを設定し、Angular コントローラーで計算できるようにしたいと考えています。

plnkr での例:

http://plnkr.co/edit/yFXnZH38kgMkUeEN5tk7

編集 1

現在の plunkr に示されているように完全な円を表示する代わりに、次のように半円を表示したいと思います。

http://wijmo.com/demo/explore/?widget=RadialGauge&sample=Half%20Circle

ウェブサイトの「ソース」にアクセスすると、どうにかして次のプロパティを Angular に取得する必要があることがわかります。

face: { 
    template: function(ui) { 
        var a = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r, 0, 180)), 
        b = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r / 6, 180, 0)), 
        style = { 
            fill: "#E0E8EF", 
            stroke: "#E0E8EF"
        }; 
        a.attr(style); 
        b.attr(style); 
        //return ui.canvas.image(url, ui.origin.x - ui.r, ui.origin.y - ui.r, ui.r * 2, ui.r * 2); 
     } 
},

編集 2

私は自分の問題を明確に述べるのに十分ではありませんでした.Ashishに感謝します. 私の問題は、jQuery で動作する例を取得できることです。しかし、私はそれを「Angularの方法」でやりたいと思っています。plkr を更新し、face(ui) 関数を script.js ファイルに追加しました。ただし、このコンテキストでは Ui は定義されていません。

http://plnkr.co/edit/yFXnZH38kgMkUeEN5tk7

4

1 に答える 1

1

face タグを追加して WijRadialGauge の角度マークアップでこのプロパティを設定し、そのテンプレート プロパティを次のように関数名に設定する必要があります。

   
  <face template="face"></face>

ここで、顔は以下で定義される関数です。

function face(ui) {
  var a = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r, 0, 180)),
   b = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r / 6, 180, 0)),
   style = {
          fill: "#E0E8EF",
          stroke: "#E0E8EF"
        };
   a.attr(style);
   b.attr(style);
  //return ui.canvas.image(url, ui.origin.x - ui.r, ui.origin.y - ui.r, ui.r * 2, ui.r *    2);
}
于 2014-03-14T07:38:04.433 に答える