Highcharts不通过角度控制器显示图表

时间:2016-04-05 02:49:23

标签: javascript angularjs charts highcharts

我开始玩高级图表来完成我正在做的项目。当我向其中转储大量数据时,Highcharts正常显示,但现在我正在尝试解析通过MongoDB检索到的数据组,我无法显示它。

这是我的角色

 $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个图表。我仍然在玩代码,但感谢任何帮助。

更新

我通过angular指令重构了我的代码,并使用了element参数在页面上显示。

1 个答案:

答案 0 :(得分:1)

Some good info using NG-Highcharts

正如其他人所说,使用指令修改dom元素,而不是控制器&amp; def不是jQuery,因为更新不属于angulars摘要循环。

您的示例需要补充模板/ html code才具有相关性。