javascript - 在highcharts ng中动态加载数据

Question

我正在为我的 Angular 项目开发 highcharts ng，但数据尚未填充。我认为可能存在与 DOM 加载和调用函数相关的问题。

我的 HTML 部分:

<div style="width: 49%; float:right;"><highchart id="chart12" config="highchartsNG"></highchart></div>

模块部分:

myApp = angular.module('myApp', ['LocalStorageModule', 'ui.bootstrap', 'highcharts-ng', 'ngAnimate', 'ui.router', 'angular-loading-bar', 'hc.marked', 'ngToast', 'angularMoment', 'slick', 'app-templates']);

Controller 部分:

myApp.controller('ReportController', ['$scope', 'CompanyService', function ($scope, CompanyService) {
    (function () {
        loadReport();
    })();

    function loadReport() {
      CompanyService.getReportData().then(function (data) {
        if (data.status === 200){
            $scope.dates = data.data.date;
            $scope.counts = data.data.count;

            $scope.fetchedData = {
              data: data.data.count
            };
            //
            // console.log("dates ==> ", $scope.dates);          // ["2017-03-14", "2017-03-19"]
            // console.log("counts ==> ", $scope.counts);   // {data: [22, 15]}

        }
      }, function (error) {

      });
    };

    $scope.dates = ['2017-03-19', '2017-03-18', '2017-03-17', '2017-03-16', '2017-03-15', '2017-03-14', '2017-03-13'];
    $scope.counts = [2,10,20, 25, 5, 15, 8];

  $scope.$watchGroup(['counts', 'dates'], function(newValues, oldValues) {

    // newValues[0] --> $scope.line
    // newValues[1] --> $scope.bar

    if(newValues !== oldValues) {
      $scope.highchartsNG = {
          chart: {
              type: 'column'
          },
          title: {
              text: 'Stacked column chart'
          },
          xAxis: {
              categories: $scope.dates
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Total count'
              },
              stackLabels: {
                  enabled: true,
                  style: {
                      fontWeight: 'bold',
                      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                  }
              }
          },
          legend: {
              align: 'right',
              x: -70,
              verticalAlign: 'top',
              y: 20,
              floating: true,
              backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
              borderColor: '#CCC',
              borderWidth: 1,
              shadow: false
          },
          tooltip: {
              formatter: function() {
                  return '<b>'+ this.x +'</b><br/>'+
                      this.series.name +': '+ this.y +'<br/>'+
                      'Total: '+ this.point.stackTotal;
              }
          },
          plotOptions: {
              column: {
                  stacking: 'normal',
                  dataLabels: {
                      enabled: true,
                      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                      style: {
                          textShadow: '0 0 3px black, 0 0 3px black'
                      }
                  }
              }
          },
          series: [{
            data: $scope.counts
          }]
      };
    }
  });

}]);

我有referred并尝试实现它，但出现控制台错误

类型错误:无法设置未定义的属性“getChartObj” 在 HighChartNGController.$onInit

我认为应该在 DOM 加载后调用一个函数，这实际上是由 $watchGroup 负责的。但我无法弄清楚如何。任何建议都会有真正的帮助。

Answer 1

使用下面的代码

   myApp.controller('ReportController', ['$scope', 'CompanyService', function ($scope, CompanyService) {
  (function () {
    loadReport();


      })();

      $scope.highchartsNG = {
        chart: {
          type: 'column'
        },
        title: {
          text: 'Stacked column chart'
        },
        xAxis: {
          categories: []
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Total count'
          },
          stackLabels: {
            enabled: true,
            style: {
              fontWeight: 'bold',
              color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
          }
        },
        legend: {
          align: 'right',
          x: -70,
          verticalAlign: 'top',
          y: 20,
          floating: true,
          backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
          borderColor: '#CCC',
          borderWidth: 1,
          shadow: false
        },
        tooltip: {
          formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+
            this.series.name +': '+ this.y +'<br/>'+
            'Total: '+ this.point.stackTotal;
          }
        },
        plotOptions: {
          column: {
            stacking: 'normal',
            dataLabels: {
              enabled: true,
              color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
              style: {
                textShadow: '0 0 3px black, 0 0 3px black'
              }
            }
          }
        },
        series: [{
          data: []
        }]
      };

      function loadReport() {
        CompanyService.getReportData().then(function (data) {
          if (data.status === 200){
            $scope.dates = data.data.date;
            $scope.counts = data.data.count;

            $scope.fetchedData = {
              data: data.data.count
            };
                //
                // console.log("dates ==> ", $scope.dates);          // ["2017-03-14", "2017-03-19"]
                // console.log("counts ==> ", $scope.counts);   // {data: [22, 15]}

              }
            }, function (error) {

            });
      };

      $scope.dates = ['2017-03-19', '2017-03-18', '2017-03-17', '2017-03-16', '2017-03-15', '2017-03-14', '2017-03-13'];
      $scope.counts = [2,10,20, 25, 5, 15, 8];

          //Assign old value
          $scope.highchartsNG.series[0].data=$scope.counts;
          $scope.highchartsNG.xAxis.categories=$scope.dates;  



      $scope.$watchGroup(['counts', 'dates'], function(newValues, oldValues) {

        // newValues[0] --> $scope.line
        // newValues[1] --> $scope.bar

        if(newValues !== oldValues) {

          //Assign value only
          $scope.highchartsNG.series[0].data=$scope.counts;
          $scope.highchartsNG.xAxis.categories=$scope.dates;     

        }
      });

    }]);

第二版

myApp.controller('ReportController', ['$scope', 'CompanyService', function ($scope, CompanyService) {


  $scope.highchartsNG = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: []
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total count'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right',
      x: -70,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      formatter: function() {
        return '<b>'+ this.x +'</b><br/>'+
        this.series.name +': '+ this.y +'<br/>'+
        'Total: '+ this.point.stackTotal;
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
          style: {
            textShadow: '0 0 3px black, 0 0 3px black'
          }
        }
      }
    },
    series: [{
      data: []
    }]
  };


  $scope.dates = ['2017-03-19', '2017-03-18', '2017-03-17', '2017-03-16', '2017-03-15', '2017-03-14', '2017-03-13'];
  $scope.counts = [2,10,20, 25, 5, 15, 8];




    //Assign old value
    $scope.highchartsNG.series[0].data=$scope.counts;
    $scope.highchartsNG.xAxis.categories=$scope.dates;  

    CompanyService.getReportData().then(function (data) {
      if (data.status === 200){
        $scope.dates = data.data.date;
        $scope.counts = data.data.count;

        $scope.fetchedData = {
          data: data.data.count
        };

        $scope.highchartsNG.series[0].data=$scope.counts;
        $scope.highchartsNG.xAxis.categories=$scope.dates;    

                //
                // console.log("dates ==> ", $scope.dates);          // ["2017-03-14", "2017-03-19"]
                // console.log("counts ==> ", $scope.counts);   // {data: [22, 15]}

              }
            }, function (error) {

            });



          /*$scope.$watchGroup(['counts', 'dates'], function(newValues, oldValues) {



            if(newValues !== oldValues) {

             //Assign value only
             $scope.highchartsNG.series[0].data=$scope.counts;
             $scope.highchartsNG.xAxis.categories=$scope.dates;     

           }
         });*/

       }]);