Question

我正在使用angularjs 练习响应式SVG 我尝试使用ng-repeat绘制一个矩形条形图，但只显示了一个，其他人不断出现错误。

以下是我的尝试：

＆＃13;

<!doctype html>
<html>

<head>
  <title>Angular Charts</title>
  <meta charset="utf-8">
  <!--<script src="js/angular.min.js"></script>-->
  <script src="https://code.angularjs.org/1.4.2/angular.min.js"></script>
  <script type="text/javascript">
    var dashboard = angular.module("Dashboard", []);

    dashboard.controller("BarGraphController", function($scope) {
      $scope.specs = {
        height: 30,
        bars: [{
          color: '#2a9fbc',
          width: 50
        }, {
          color: '#f15b2a',
          width: 70
        }, {
          color: '#a62e5c',
          width: 100
        }]
      };
    });
  </script>
</head>

<body ng-app="Dashboard">
  <div ng-controller="BarGraphController">
    <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" style="border:solid 1px gray">
                    <rect ng-repeat="bar in specs.bars" 
                        x="0" y="0" fill="{{bar.color}}" width="{{bar.width}}" height="{{specs.height}}"/>
                </svg>
            </span>
  </div>
</body>

</html>

＆＃13;

这是我在浏览器中不断获取的内容：

意外值{{specs.height}}解析高度属性。的index.html 意外值{{bar.width}}解析宽度属性。的index.html 解析高度属性的意外值{{specs.height}}。 angular.min.js：70：379 意外值{{bar.width}}解析宽度属性。 angular.min.js：70：379 解析高度属性的意外值{{specs.height}}。 angular.min.js：70：379 意外值{{bar.width}}解析宽度属性。 angular.min.js：70：379 解析高度属性的意外值{{specs.height}}。 angular.min.js：70：379 意外值{{bar.width}}解析宽度属性。

Answer 1

正在显示所有矩形，但它们彼此重叠。尝试设置你的＆＃34; y＆＃34;像这样的矩形属性：

<rect ng-repeat="bar in specs.bars" 
                    x="0" y="{{$index * specs.height}}" fill="{{bar.color}}" width="{{bar.width}}" height="{{specs.height}}"/>

这应该按照您指定的高度将它们全部分开，以便您可以看到所有这些。

请参阅此处的小提琴：https://jsfiddle.net/mhrhc19k/

请参阅此主题以了解您获得的错误：creating svg elements with angularJS

看起来可能有一个角度属性可用于避免错误。 svg在加载角度之前渲染，因此它实际上看到的是{{specs.height}}而不是30.这是错误的原因，但它仍然在以后加载它。可能是时候创建一个指令：）

解析高度属性的意外值{{specs.height}}。的index.html

1 个答案: