如何從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

回答

相關問題