使用angularjs-nvd3-directives顯示圖表不起作用

所以我做了一個簡單的Angular-nvd3項目。我使用這個Github庫中的liveData.example（angularjs-nvd3-directives）。爲了使用我的REST API，我稍微改進了一下。使用angularjs-nvd3-directives顯示圖表不起作用

這是我的REST API：

http://amr2.mybluemix.net/getmet/list

這是我的代碼：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<html> 
<head> 
    <title>Angular.js nvd3.js Live Data Chart Example</title> 
    <meta http-equiv="content-type" content="text/html; charset=UTF8"> 
    <script src="js/angular.js"></script> 
    <script src="js/d3.js"></script> 
    <script src="js/nv.d3.js"></script> 
    <script src="js/moment.js"></script> 
    <script src="dist/angularjs-nvd3-directives.js"></script> 
    <link rel="stylesheet" href="nv.d3.css"/> 
    <script> 
     var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']); 

     app.config(['$httpProvider', function($httpProvider) { 
      $httpProvider.defaults.useXDomain = true; 
      delete $httpProvider.defaults.headers.common['X-Requested-With']; 
      } 
     ]); 


     app.factory('DataMeterDetail', ['$http', function($http){ 
       var getData = function(_id, _rev){ 
        return $http({ 
         method: 'JSONP', 
         url: 'http://amr2.mybluemix.net/getmet/list' 
        }); 
       } 
       return{ 
        getDataDetail: function(_id, _rev){return getData(_id, _rev);} 
       } 
     }]); 

     app.factory('DataMeter', function(){ 
      return { 
       cityId: 0, 
       units: 'imperial' 
      } 
     }); 

     function ExampleCtrl($scope, DataMeterDetail, DataMeter){ 
      function fetchData(){ 
       DataMeterDetail.getDataDetail(5506956, 'imperial') 
         .success(function(response){ 
          console.log(response); 
          var dta = [{key:"100010001_20082015_0", values:[]}]; 
           dta[0].values = response.list.map(function(d){ 
           return [d._id, d._rev]; 
          }); 
          $scope.exampleData = dta; 
         }); 
      } 

      fetchData(); 

      $scope.xAxisTickFormatFunction = function(){ 
       return function(d){ 
        return d3.time.format('%x-%H:%M')(new Date(d*1000)); 
       } 
      } 


     } 
    </script> 
    <style> 
     div{ 
      font-family: sans-serif; 
     } 
    </style> 
</head> 
<body ng-app='nvd3TestApp'> 

<div ng-controller="ExampleCtrl"> 

    <input type="text" ng-model="cityName"/> 

    <div>Example Data</div> </div> 
    <nvd3-line-chart 
      data="exampleData" 
      id="exampleId" 
      width="800" 
      height="400" 
      showXAxis="true" 
      showYAxis="true" 
      tooltips="true" 
      interactive="true" 
      xAxisTickFormat="xAxisTickFormatFunction()" 
      margin="{left:100,top:20,bottom:20,right:10}" 
      yAxisLabel="Temperature (F)" 
      xAxisLabel="Date" 
      > 
     <svg></svg> 
    </nvd3-line-chart> 
</div> 

</body> 
</html>

現在的代碼不能正常工作。你們可以告訴我這個代碼有什麼問題嗎？在此先感謝。

來源

2015-08-26 yogieputra

也許這可以幫助解決這個問題.. 我遇到了上面提到的同樣的問題。

我的代碼片段如下。只需在計時器功能中使用$ scope.apply即可。

setInterval(function(){ 
     $scope.$apply(function(){ 
      // var data= $scope.exampleData; 
      $scope.exampleData = data; 
      // console.log('Client ON ### setInterval called!! ' ,   $scope.exampleData[0].values[0]); 
     }); 
    }, 200); // 0.2 sec

來源

2015-11-16 07:54:08

使用angularjs-nvd3-directives顯示圖表不起作用

回答

相關問題