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, который вы можете установить через свои контроллеры
