HighCharts undefined, потому что несколько страниц HTML в файле Javascript

Я пытаюсь получить идентификатор div, называемый "контейнер" следующим образом:

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

Он отлично работает, когда я вызываю контроллер, определенный на моей странице html. Но когда я пытаюсь вызвать эту функцию другим контроллером, который не ссылается на мою страницу Html, он не работает.

SO, Как я могу вызвать свой div внутри другого контроллера, который ассоциируется на другой странице html?

Пример:

Он работает и определен в моем контроллере "main", который определен на моей странице html "main.html"

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

        var objectDate = totalDatePerUser.data;

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

        loadDataChart1(mascDate, femDate);            

    });

Он не работает и определен в моем "меню" контроллера, который определен на моей странице html "menu.html"

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

                      var objectDate = datePerUserTeste.data;

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

                      loadDataChart1(newMaleDate, newFemDate);

                  });

Оба вызова выполняют следующую функцию

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);

}

Только для информации, я использую angularJS с Rest Service, чтобы получить данные из БД, и у меня есть несколько страниц Html.

Ответ 1

Супер простой вариант для вашего случая - это "общий" контроллер с функциональностью "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);
    }); 
}

Ответ 2

Вы можете создать директиву и использовать эту директиву в вашем коде htmls..sample, представленном здесь.

Директива:

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

В HTML:

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

каждый graphData, который вы можете установить через свои контроллеры