Question

我使用angularjs构建图形，一切都正常，但我得到了大量的错误消息，我无法真正解决。我有一个包含数据点和属性的数组。在html代码中，我调用了如下所需的属性：

 <circle ng-repeat="point in points | limitTo : points.length-1" 
    cx="{{500 / maxX * point.xValue}}" cy="{{points[$index].insulin / maxY * 400}}"
    r="3" fill="red"/>

所有消息都有点像这样，它们都涉及括号内的表达式：错误：属性y2：预期长度，“{{points [$ index ...”。

这不是这样做的方法吗？我应该以不同的方式进行计算吗？我不知道如何计算积分。

codepen链接： https://codepen.io/mbezema/pen/bvWPVm

Answer 1

你得到的只是一个警告，而不是一个错误，它只在开发者控制台中可见，所以从用户的角度来看，没有任何严重的事情发生;图表被正确呈现。

您遇到的是AngularJS的限制，已在较新的Angular版本中解决：在数据绑定发生之前，浏览器会立即读取AngularJS命令字符串，i。即

cx="{{500 / maxX * point.xValue}}"

并抱怨此字符串不是数字。从那之后，AngularJS立即用

交换它

cx="15"

浏览器满意，并正确呈现圆圈。

如果你真的想避免这些消息，可能的解决方案是从SVG命名空间中省略具有数据绑定的属性，并仅从Javascript中编写它们。您可以定义两个简单的指令：

app.directive('graphPoint', function () {
  return {
    link: function (scope, element) {
      element.attr('cx', 500 / scope.maxX * scope.point.xValue)
      element.attr('cy', scope.point.insulin / scope.maxY * 400)
    },
    scope: true
  }
});

app.directive('graphLine', function () {
  return {
    link: function (scope, element) {
      element.attr('x1', 500 / scope.maxX * scope.point.xValue)
      element.attr('y1', scope.point.insulin / scope.maxY * 400)
      element.attr('x2', 500 / scope.maxX * scope.points[scope.$index + 1].xValue)
      element.attr('y2', scope.points[scope.$index + 1].insulin / scope.maxY * 400)
    },
    scope: true
  }
});

并将您的<svg>写为

<svg height="400" width="500">
  <line graph-line ng-repeat="point in points | limitTo : points.length-1" />
  <circle graph-point ng-repeat="point in points" r="3" fill="red" />
</svg>

注意：我假设您无意中遗漏了最后一个数据点，并从圈ng-repeat中删除了过滤器。

构建svg图时的angularjs计算错误

1 个答案: