如何在 Angular 应用程序中绑定图形度量 jquery 插件

How to bind graphicsmetrics jquery plugin in Angular app

本文关键字：图形 度量 jquery 插件 绑定 Angular 应用程序      更新时间：2023-09-26

我正在做一个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而不是文件。

谢谢

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

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中使用的整个对象传递给指令，使其更加通用和可重用。

相关文章：