javascript - 我如何将旭日图转换为与 angularjs 一起使用的指令？

Question

我创建了一个sunburst graph使用普通的 JavaScript。

现在我需要从服务获取数据并在 AngularJS 中生成图表。我怎样才能从中制定指令？任何示例或指导都会很棒。

我制作了一个 Controller 来从服务获取数据。代码在这里:

 $scope.buildchart = function(widget) {
        var w2 = new Worker("scripts/webworkers/bigQueryWorker.js");           
        w2.postMessage($scope.selectedClass + "," 
          + $rootScope.hierarchystring.toString() 
          + "," + "Hierarchy" + "," + Digin_Engine_API);

        w2.addEventListener('message', function(event) {
            hierarchyRetrieved(event);
        });

        function hierarchyRetrieved(event) {
            var obj = JSON.parse(event.data);
            console.log("Hierarchy data is");
            console.log(JSON.stringify(obj));

        };
    };

有什么方法可以在这个函数中获取这些数据吗？

Answer 1

首先您制定如下指令:

<svg sunburst-chart></svg>

第二

为ajax创建一个模拟函数，如下所示:

 function mockAnAjaxCall() {
    window.setTimeout(function() {
      $scope.data1 = {
        "name": "Root",
        "children": [{ ...
        }]
      };
        $scope.$apply();//apply the scope as data is changed.
    }, 3000); //ajax call gets over in 3 secs

第三

创建一个链接函数来观察data1变量上的数据变化。

link: function(scope, elem, attrs) {
  //this will watch the scope data
  scope.$watch(
    "data1",//variable you are watching
    function handleChange(root, oldValue) {
                console.log(scope.data1)
      if (!root) {
        return;
      }
      //make the sun burst chart.

工作示例 here

希望这有帮助!