Question

我想将Wijmo图书馆的标准全圆RadialGauge更改为半圆形。我已经阅读了文档，我知道这可以通过覆盖“面对面”来完成。属性。

我无法弄清楚如何在Angular中执行此操作。我希望能够在HTML中设置属性面并在Angular控制器中进行计算。

plnkr中的示例：

http://plnkr.co/edit/yFXnZH38kgMkUeEN5tk7

修改1

而不是像当前的plunkr中所示的那样有一个完整的圆圈，我想要像这样显示半个圆圈：

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

当你去＆＃39;来源＆＃39;在网站上，我知道我必须以某种方式将以下属性纳入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的示例。但我想这样做＆＃34; Angular方式＆＃34;。我更新了我的plnkr并将face（ui）函数添加到script.js文件中。然而，Ui在这方面是不确定的。

http://plnkr.co/edit/yFXnZH38kgMkUeEN5tk7

Answer 1

您需要在WijRadialGauge的角度标记中设置此属性，方法是添加面部标记并将其模板属性设置为函数名称，如下所示：

   
  <face template="face"></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);
}

如何使用Angularjs将Wijmo RadialGauge的面改为半圆

1 个答案: