如何从URL设置JSON数据上highchart和轮询JSON数据1秒之后，使用角JS

HTML代码如何从URL设置JSON数据上highchart和轮询JSON数据1秒之后，使用角JS

<!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>

角js代码上highchart到dislay

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

此代码不显示highchart上的数据，尽管它仅在控制台上显示网址并显示数据。我希望这段代码能够在highchart上显示数据，并在距离url 1秒后轮询数据并在highchart上显示它，就像实时数据示例一样。 http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/dynamic-update/ OR https://www.highcharts.com/studies/live-server.htm

来源

2017-07-31 ASM

最佳实施该方式是创建（隔绝范围）的自定义指令&将数据传递到它，并指令内观看提供&更新标绘highchart与数据变化数据的变化。指令可以是：

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你能提供的所有配置选项以及数据图表指令绘制（从控制器）。

工作plunker例如：https://plnkr.co/edit/ePLIPsN3S7p8OszyKzCj?p=preview

来源

2017-07-31 20:09:04 Shantanu

不，我不希望图表通过随机的数据进行更新，但只能通过它的数据是通过URL获得。 – ASM

为此，只需创建角度服务以使http获取请求，然后在控制器中使用$ scope.basicAreaChart.series [0] .data = dataService.getData（）。但是这也只会运行一次，所以如果您想要实时加载数据，那么您必须在间隔内添加此代码。 $ interval（updateData，1000）; updateData是调用服务和更新图表数据属性的函数 – Shantanu

如何从URL设置JSON数据上highchart和轮询JSON数据1秒之后，使用角JS

回答

相关问题