使用Raphael创建自定义角度指令的问题

我想创建一个自定义角度指令来使用Raphael创建饼图。然而，我似乎无法让SVG正确显示（它似乎是堆叠在一起（position：absolute; top：0）。但是，当我为每个指令创建Raphael对象时，我使用了在模板内格但SVG似乎并不嵌入在专区内我已经试过“取代：真的。”？但它似乎没有任何工作没有人知道如何解决这个使用Raphael创建自定义角度指令的问题

JS Fiddle

app.directive('piechart', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      dset: '=' 
     }, 
     template: '<div></div>', 
     link: function(scope, element, attrs) { 
      var r = Raphael(element.children(0)); 
      r.piechart(100, 100, 100, [scope.dset.male, scope.dset.female]);    
     } 
    } 
});

来源

2013-11-27 Dan Tang

我用

Raphael(element[0])

代替

Raphael(element.children(0))

和模板选项是没有必要的

这样。

app.directive('piechart', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      dset: '=' 
     }, 
     link: function(scope, element, attrs) { 
      var r = Raphael(element[0]); 
      r.piechart(100, 100, 100, [scope.dset.male, scope.dset.female]); 
     } 
    } 
});

来源

2013-11-27 10:06:54 Roger

嗨罗杰，它的工作原理，但我不完全知道为什么 - 它是因为模板的选择，因为元素[0]的还是？ –

这是因为元素[0]，raphaeljs创建 Roger

没有任何观察或观察，所以即使数据集已更改，图片将是相同的。 – Vanuan

app.directive('piechart', function() { 
return { 
    restrict: 'E', 
    scope: { 
     dset: '=' 
    }, 
    template: '<div id="chart"></div>', 
    link: function(scope, element, attrs) { 
     var r = Raphael("chart"); 
     r.piechart(100, 100, 100, [scope.dset.male, scope.dset.female]);    
    } 
}});

来源

2016-01-29 06:41:32

使用Raphael创建自定义角度指令的问题

回答

相关问题