Javascript 如何在Angular应用程序中绑定graphicsmetrics jquery插件_Javascript_Jquery_Angularjs_Metricsgraphicsjs

Javascript 如何在Angular应用程序中绑定graphicsmetrics jquery插件

javascript jquery angularjs

Javascript 如何在Angular应用程序中绑定graphicsmetrics jquery插件,javascript,jquery,angularjs,metricsgraphicsjs,Javascript,Jquery,Angularjs,Metricsgraphicsjs,我正在做一个角度的应用程序，我最近发现。问题是我很难将它集成到我的angular应用程序中，因为它是为Jquery构建的另一个棘手的问题是，我的Angular应用程序正在使用restful API，对于我想要集成的图形，数据在API中生成图形的代码： $(function () { d3.json('file/json.json', function(data) { data_graphic({ data: data, width: 650,

我正在做一个角度的应用程序，我最近发现。问题是我很难将它集成到我的angular应用程序中，因为它是为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格式，即

所以我要做的是将这个jquery脚本绑定到angular指令（或控制器）中，并使数据来自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>

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

指令：

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"
      });
    }
  };
});

用法：

<metrics></metrics>

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

请注意，

ng if

用于防止指令在数据可用之前执行

演示：

下一步是将

data\u graphic

中使用的整个对象也传递给指令，使其更加通用和可重用。

完美！但是，当将其作为指令集成时，请求访问我的API时，它不会加载图形，它会给我以下错误：

错误：语法错误，无法识别的表达式：[object htmlunknowneelement]svg.main行

我做错了什么？不确定。当控制器发出请求时，它是否工作？