0

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

我只是不知道如何在 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 方式”来做。我已经更新了我的 plnkr 并将 face(ui) 函数添加到 script.js 文件中。然而，在这种情况下，Ui 是未定义的。

http://plnkr.co/edit/yFXnZH38kgMkUeEN5tk7

4

1 回答 1

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);
}
于 2014-03-14T07:38:04.433 回答