HighCharts jest niezdefiniowana, ponieważ wiele stron HTML w pliku JavaScript

Question

Próbuję uzyskać identyfikator div o nazwie „kontener” tak:

var chart = $(#container).highcharts();

Działa doskonale, gdy zadzwonię przez kontroler zdefiniowany na mojej stronie html. Ale kiedy próbuję wywołać tę funkcję przez inny kontroler, który nie jest polecany przez moją stronę HTML, to nie działa.

SO, Jak mogę połączyć się z moim div wewnątrz innego kontrolera, który jest powiązany z inną stroną HTML?

Przykład:

To działa i jest zdefiniowany w moim kontrolera „główny”, który jest zdefiniowany w moim html strony „main.html”

Item.Rest("datePerUser",null).then(function(totalDatePerUser){ 

     var objectDate = totalDatePerUser.data; 

     var femDate = objectDate.Chart1Fem; 
     var mascDate = objectDate.Chart1Masc;  

     loadDataChart1(mascDate, femDate);    

    }); 

To nie jest praca i jest zdefiniowane w moim "menu" kontrolera, który jest zdefiniowany w mojej strony html "menu.html"

PeriodItem.Rest("datePerUser_",Obj).then(function(datePerUserTeste){ 

         var objectDate = datePerUserTeste.data; 

         newFemDate = objectDate.Chart1Fem; 
         newMaleDate = objectDate.Chart1Masc;  

         loadDataChart1(newMaleDate, newFemDate); 

        }); 

zarówno wywołać funkcję Śledź

function loadDataChart1(dataMale, dataFem){ 

    var chartProfiles = $('#container').highcharts(); 

    obj_female = JSON.parse('{ "data":' + dataFem + ' }'); 
    obj_male = JSON.parse('{ "data":' + dataMale + ' }'); 

    chartProfiles.series[0].update(obj_female);  
    chartProfiles.series[1].update(obj_male); 

} 

Wystarczy do informacji, używam angularjs z Rest Service, aby uzyskać dane z DB i mam wiele stron HTML.

Answer 1

Bardzo prosta opcja dla twojego przypadku to "wspólny" kontroler z funkcją "loadDataChart1".

//Step 1 
 
app.controller('CommonChartsController', function($scope) { 
 
    $scope.createCharts = function (dataMale, dataFem) {  
 
     var chartProfiles = $('#container').highcharts(); 
 

 
     obj_female = JSON.parse('{ "data":' + dataFem + ' }'); 
 
     obj_male = JSON.parse('{ "data":' + dataMale + ' }'); 
 

 
     chartProfiles.series[0].update(obj_female);  
 
     chartProfiles.series[1].update(obj_male); 
 
    };  
 
} 
 
       
 
//Step 2 
 
app.controller('MainController', function($scope, $controller) { 
 

 
    $controller('CommonChartsController', { 
 
     $scope: $scope    
 
    }); 
 

 
    Item.Rest("datePerUser",null).then(function(totalDatePerUser){ 
 
     var objectDate = totalDatePerUser.data; 
 

 
     var femDate = objectDate.Chart1Fem; 
 
     var mascDate = objectDate.Chart1Masc;  
 

 
     $scope.createCharts(mascDate, femDate);    
 
    }); 
 
} 
 

 
//Step 3 
 
app.controller('MenuController', function($scope, $controller) { 
 

 
    $controller('CommonChartsController', { 
 
     $scope: $scope    
 
    }); 
 

 
    PeriodItem.Rest("datePerUser_",Obj).then(function(datePerUserTeste){ 
 
     var objectDate = datePerUserTeste.data; 
 

 
     newFemDate = objectDate.Chart1Fem; 
 
     newMaleDate = objectDate.Chart1Masc;  
 

 
     $scope.createCharts(newMaleDate, newFemDate); 
 
    }); 
 
}      
 
       
 
      

Answer 2

Można utworzyć dyrektywy i używać tej dyrektywy w kodzie htmls..sample dostarczonych tutaj

dyrektywa:

angularAMD.directive('graphDirective', function() { 
     return { 
      restrict: 'E', 
      template: '<div></div>', 
      scope: { 
       chartData: "=value", 
       chartObj: "=?", 
       page: "=", 
      }, 
      transclude: true, 
      replace: true, 
      link: function ($scope, $element, $attrs) { 
       // Update when charts data changes 
       $scope.$watch('chartData', function (value) { 
        if (!value) { 
         return; 
        } 
         var graphData = { 
          chart: { 
           type: 'area', 
           marginLeft: 65, 
           marginRight: 1, 
           marginBottom: 40, 
           plotBackgroundColor: '#FFF', 
           backgroundColor: 'transparent', 
           plotBorderWidth: 1, 
           plotBorderColor: '#CCC', 
           animation: false, 
           renderTo: $element[0] 
          }, 
          legend: { 
           enabled: true, 
           align: 'right', 
           verticalAlign: 'top', 
           layout: 'horizontal', 
           backgroundColor: '#FFF', 
           borderColor: '#FFF', 
           borderWidth: 1, 
           symbolHeight: 20, 
           symbolWidth:20 
          }, 
          title: { 
           text: '' 
          }, 
          credits: { 
           enabled: false 
          }, 
          xAxis: { 
           min: 0, 
           categories: [], 
           title: { 
            margin: 0, 
           }, 
           tickInterval: 1, 
           tickmarkPlacement: 'on', 
           gridLineWidth: 1, 
           gridLineColor: '#bbb', 
           alternateGridColor: '#FFF', 
           gridZIndex: 1, 
           startOnTick: true, 
           endOnTick: false, 
           minPadding: 0, 
           maxPadding: 0, 
           lineWidth: 1 
          }, 
          yAxis: { 
           // min: 0, 
           title: { 
            margin: 10, 
            text: 'Target' 
           }, 
           labels: { 
            formatter: function() { 
             return this.value; 
            } 
           }, 
           gridLineWidth: 1, 
           gridLineColor: '#ddd', 
           lineWidth: 1, 
           tickInterval: 10 
          }, 
          plotOptions: { 
           series: { 
            states: { 
             hover: '' 
            }, 
           }, 
           area: { 
            //pointStart: 5, 
            marker: { 
             enabled: true, 
             symbol: 'circle', 
             radius: 4, 
             lineWidth: 2, 
             lineColor: '#FFF', 
             states: { 
              hover: { 
               enabled: true 
              } 
             } 
            } 
           } 
          }, 
          series: [ 
           { 
            animation: false, 
            fillOpacity: 0.4, 
            name: 'Actual', 
            color: "#5F8605", 
            data: [], 
            connectNulls: true 
           }, 
           { 

            animation: false, 
            fillOpacity: 0.4, 
            name: 'Strech Goal', 
            color: "#61DDD3", 
            data: [], 
            connectNulls: true 
           }, 
           { 
            animation: false, 
            fillOpacity: 0.4, 
            name: 'Goal', 
            color: "#31ABEA", 
            data: [], 
            connectNulls: true 
           } 
          ] 
         }; 
         graphData.series[0].data = $scope.chartData.series[0].data; 
         graphData.series[2].data = $scope.chartData.series[2].data; 
         graphData.series[1].data = $scope.chartData.series[1].data; 
         graphData.yAxis.min = $scope.chartData.yAxis.min; 
         graphData.yAxis.max = $scope.chartData.yAxis.max; 
         graphData.xAxis.categories = $scope.chartData.xAxis.categories; 
         graphData.yAxis.title.align = 'high'; 
         graphData.yAxis.title.offset = -15; 
         graphData.yAxis.title.rotation = 0; 
         graphData.yAxis.title.y = -10; 
         graphData.xAxis.min = graphData.xAxis.min; 
         graphData.xAxis.max = $scope.chartData.xAxis.max; 
         graphData.xAxis.labels = { 
          formatter: function() {...} 
         }; 
         graphData.tooltip = { 
          formatter: function() {..} 
         };      
         $scope.chartObj = new Highcharts.Chart(graphData); 
        } 
       }, true); 
      } 
     }; 
    }); 

W HTML:

<graph-directive class="cls" page="ctrl.graphPlottingPage" value='ctrl.graphData'></graph-directive > 

każdy graphData można ustawić za pomocą kontrolerów