Question

HTML代码

<!DOCTYPE html>
<html ng-app="myModule">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="Testscript.js"></script>
  </head>

  <body ng-controller="myController">
    <div id="container" style="min-width: 310px; max-width: 600px; height: 
    400px; margin: 0 auto">Time series Highchart</div>
  </body>
</html>

Angular js代码

angular.module('myModule', [])
  .controller('myController', function($scope, $http) {
      $http.get("https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?").success(function(data) {
        $scope.myData = data;


        Highcharts.chart('container', {
            chart: {
                type: 'line'
                },

            series: [{
                turboThreshold: 0,
                data: data
                    }]
    });
  });
  });

此代码未显示高图上的数据，尽管它只是在网页上显示数据并仅在控制台上显示数据。我希望这段代码能够在高清图上显示数据，并在网站1秒后轮询数据并在高图上显示，就像实时数据一样。 http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/dynamic-update/ 要么 https://www.highcharts.com/studies/live-server.htm

Answer 1

实施的最佳方式是创建（隔离范围）自定义指令＆amp;将数据传递给它，并在指令内观察所提供的数据的变化＆amp;通过更改数据更新绘制的高图。指令可以是：

app.directive('chart', function () {
  return {
    restrict: 'E',
    template: '<div></div>',
    scope: {
        chartData: "=value"
    },
    transclude:true,
    replace: true,
    link: function (scope, element, attrs) {
        var chartsDefaults = {
        chart: {
          renderTo: element[0],
          type: attrs.type || null,
          height: attrs.height || null,
          width: attrs.width || null
        }
        };        
        scope.$watch(function() { return scope.chartData; }, function(value) {
            if(!value) return;
            var deepCopy = true;
            var newSettings = {};
            $.extend(deepCopy, newSettings, chartsDefaults, scope.chartData);
            var chart = new Highcharts.Chart(newSettings);
        });
    }
  };
});

您可以在主模板中将其简单地用作：

<chart value='basicAreaChart'></chart>

通过basicAreaChart您可以提供所有配置选项以及数据到图表指令以进行绘图（来自控制器）。

工作插件示例：https://plnkr.co/edit/ePLIPsN3S7p8OszyKzCj?p=preview

如何在高亮图上从url设置json数据并在1秒后轮询json数据以使用Angular js在高图上显示

1 个答案: