1

我正在做一个 Angular 应用程序，我最近发现了Metrics Graphics。问题是我很难将它集成到我的角度应用程序中，因为它是为 Jquery 构建的。

另一个棘手的问题是我的 Angular 应用程序正在使用一个 RESTful API，而对于我想要集成的图形，数据在 API 中。

生成图形的代码：

$(function () {
  d3.json('file/json.json', function(data) {
    data_graphic({
      data: data,
      width: 650,
      height: 150,
      target: '#element',
      x_accessor: 'Month',
      y_accessor: 'Value'
    })
  });
});

如您所见，此代码从 json 文件中提取数据。谢天谢地，我的 API 也返回 json 格式，即http://api.example.com/api/data。

所以我想做的是在一个角度指令（或控制器）中绑定这个 jquery 脚本，并使数据来自 API 而不是文件。

谢谢

4

1 回答 1

2

这是一个简单的示例，其中所有内容都由指令处理：

app.directive('metrics', function($http) {

  return {
    restrict: 'E',
    link: function(scope, element) {

      var success = function(result) {
        data_graphic({
          title: "UFO Sightings",
          description: "Yearly UFO sightings from 1945 to 2010.",
          data: result,
          markers: [{
            'year': 1964,
            'label': '"The Creeping Terror" released'
          }],
          width: 400,
          height: 250,
          target: element[0],
          x_accessor: "year",
          y_accessor: "sightings",
          interpolate: "monotone"
        });
      };

      var error = function() {
        console.log('Error.');
      };

      $http.get('data.json').success(success).error(error);
    }
  };
});

用法：

<metrics></metrics>

您可以替换data.json为您需要的 URL，只要它返回正确的格式即可。成功函数将启动data_graphic并设置data为从$http.get和 目标到指令 DOM 元素的结果。

演示： http ://plnkr.co/edit/SOfTS6KL0GJ7ynvyrBfn?p=preview

如果您希望控制器处理数据的检索：

app.controller('MyController', function($scope, $http) {

  var success = function(result) {
    $scope.data = result;
  };

  var error = function() {
    console.log('Error.');
  };

  $http.get('data.json').success(success).error(error);
});

指示：

app.directive('metrics', function($http) {

  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    link: function(scope, element) {

      data_graphic({
        title: "UFO Sightings",
        description: "Yearly UFO sightings from 1945 to 2010.",
        data: scope.data,
        markers: [{
          'year': 1964,
          'label': '"The Creeping Terror" released'
        }],
        width: 400,
        height: 250,
        target: element[0],
        x_accessor: "year",
        y_accessor: "sightings",
        interpolate: "monotone"
      });
    }
  };
});

用法：

<body ng-controller="MyController">
  <metrics ng-if="data" data="data"></metrics>
</body>

请注意，ng-if用于防止指令在数据可用之前执行。

演示： http ://plnkr.co/edit/96IVbjlZk8nriiREHdl4?p=preview

下一步是将用于指令的整个对象也传递data_graphic给指令，使其更加通用和可重用。

于 2014-12-02T21:58:52.017 回答