javascript - Highcharts 不通过 Angular Controller 显示图表

Question

我开始为我正在做的项目使用 highcharts。当我将大量数据转储到 Highcharts 中时，Highcharts 可以正确显示，但现在我尝试解析通过 MongoDB 检索到的数据组，却无法显示它。

这是我的 Angular

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

        };
      };
    })
  });
};

当页面加载时，获取请求会调用数据库并获取要提供给网页的数据，我现在正在尝试获取数据组social_tone_data以显示在图表上。我的 mongo 数据库中有 19 个文档，并且希望每次循环完成时都会生成一个图表并将其提供给我的网页。我应该有 19 张图表。我仍在研究代码，但感谢任何帮助。

更新

我通过 Angular Directive(指令)重构了我的代码，并使用元素参数显示在页面上。

Answer 1

Some good info using NG-Highcharts .

正如其他人所说，使用指令来修改 dom 元素，而不是 Controller 和 def 不是 jQuery，因为更新不在 Angulars 摘要循环之外。

您的示例需要补充 template/html code 才能相关。