Question

我想基于数据制作不同颜色的矩形的xy图。 X是天，Y是一天中的几小时。它是一个活动图。

的index.html

<html>
<body>
    <script src="js/angular.js"></script>
    <script>
        var app = angular.module("app",[]);
        app.controller("controller",function($scope){

        });
        app.directive("graph",function(){
            return {
                controller:function($scope){
                    $scope.val=50;
                },
                templateUrl:"test.html",
                scope:{
                    code:"="
                },
                restrict:"E"
            }
        });
    </script>
    <div ng-app="app" ng-controller="controller">
        <graph></graph>
    </div>
</body>
</html>

的test.html

<svg>  
    <rect x="0" x="0" ng-attr-width="{{val}}" ngheight="50"></rect>
</svg>

Answer 1

以下是一个简单指令的示例，该指令将替换为svg：

var app = angular.module('app', []);

app.directive('graph', function(){
  return {
    replace: true,
    restrict: 'E',
    scope: {
      data: '='
    },
    template: '<svg><g><rect ng-repeat="item in data" x="{{item.x}}" y="{{item.y}}" width="{{item.width}}" height="{{item.height}}"></rect></g></svg>'
  };
});

这将在following plunker中使用。

但请注意：

解析DOM时会遇到大量错误，因为{{item.x}}不是x属性的有效值，直到通过angular计算表达式。您可以通过定义将评估值应用于DOM的自定义graph-x，graph-y，graph-*指令来解决此问题。有关详细信息，请参阅此issue。
如果您想做一些更复杂的事情，我建议您查看一个很棒的库D3.js，就像jQuery一样，可以在svg中进行数据可视化。

如何在自定义指令中添加SVG angularjs标签？

1 个答案: