HighCharts未定义，因为Javascript文件中有多个Html页面

Question

I'm trying to get a div id called "container" like this:

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

It works perfectly when I call by a controller that is defined in my html page. But When I try to call this function by another controller which is not referred by my Html page, it isn't working.

SO, How can I call my div inside other controller which is associate in other html page?

Example:

It works and is defined in my controller "main" which is defined in my html page "main.html"

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

        var objectDate = totalDatePerUser.data;

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

        loadDataChart1(mascDate, femDate);            

    });

It isn't work and is defined in my controller "menu" which is defined in my html page "menu.html"

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

                      var objectDate = datePerUserTeste.data;

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

                      loadDataChart1(newMaleDate, newFemDate);

                  }); 

A both call the follow function

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

} 

Just to information, I'm using angularJS with Rest Service, to get data from DB, and I have multiple Html pages.

Answer 1

A super simple option for your case is a 'common' controller with 'loadDataChart1' functionality.

 //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

You can create a directive and use that directive in your htmls..sample code provided here

Directive:

  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); } }; }); In HTML: 

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); } }; }); In HTML:

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

each graphData you can set via your controllers