2016-04-05 60 views
1

我開始玩高級項目,我正在做一個項目。當我將大量數據轉儲到其中時,Highcharts正常顯示,但現在我試圖解析通過MongoDB檢索的數據組,我無法顯示它。Highcharts不通過角度控制器顯示圖表

這裏是我的角度

$scope.retrieveData = function(){ 
    $http.get('/calldata').then(function(response){ 
    $scope.toneDatas = response.data 
    var idArray = [] 
    angular.forEach($scope.toneDatas, function(value, key) { 
     idArray.push({id: value._id, social_tone_data: value.social_tone_data}) 
     for (var i = 0; i < idArray.length; i++) { 
     if (idArray[i].id === value._id) { 
      console.log(idArray[i].id) 
      var socialToneName = [] 
      var socialToneScore = [] 
      angular.forEach(value.social_tone_data, function(value, key) { 
      socialToneScore.push(value.tone_score) 
      socialToneName.push(value.tone_type) 
      }) 
      $("#" + value._id).highcharts({ 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: 'Fruit Consumption' 
      }, 
      xAxis: { 
       categories: socialToneName 
      }, 
      yAxis: { 
       title: { 
        text: 'Fruit eaten' 
       } 
      }, 
      series: [{ 
       data: socialToneScore 
      }] 
      }); 

     }; 
     }; 
    }) 
    }); 
}; 

當頁面加載一個GET請求調用數據庫,得到的數據將被提供給網頁,和我想現在得到的數據組social_tone_data到顯示在圖表上。我在我的mongo數據庫中有19個文檔,並且希望它每次循環完成時生成一個圖表並將其提供到我的網頁。我應該有19個圖表。我仍在玩代碼,但任何幫助表示讚賞。

UPDATE

我重構我的代碼通過一個角指令和所使用的元件參數以顯示在網頁上。

+1

在控制檯中是否有任何錯誤?爲(var i = 0;我 sdfacre

+2

你可以提供你如何渲染你的圖表的代碼AFAIK你應該使用指令 你可以提供一個Codepen或JSBin – Rishab777

+0

@sdfacre沒有錯誤消息和所有數據打印,因爲我想要它。我認爲它與我試圖在for循環中創建圖表實例有關 – wariofan1

回答

1

Some good info using NG-Highcharts

正如其他人所說,使用指令來修改DOM元素,而不是控制器& def不jQuery作爲更新超出angulars摘要循環。

您的示例需要補充模板/ html code纔是相關的。