I am trying to make bar chart in angular .I am able to make in jquery (using highchart.js file).This is link which I am able to make in jquery code http://plnkr.co/edit/SD1iSTBk8o1xi3unxKeE?p=preview .I am getting the correct output.But the same thing I need to show using angularjs using directive .So I try to make directive .My issue is how I will pass my parameter in directive
here is my angular code . http://plnkr.co/edit/LwonlkbCy3asHXyToVMz?p=catalogue
// Code goes here
angular.module('contactsApp', ['ionic'])
.controller('MainCtrl', function($scope) {
}).directive('chartTest',function(){
return {
restrict: 'E',
scope:{
},
link :function(scope, element, attrs){
element.highcharts({
chart: {
type: 'bar'
},
title: {
text: chart_title
},
xAxis: {
categories: xAxisarry
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: names[0],
data: janeData
}, {
name: names[1],
data: joneData
}]
});
}
}
});
I want it look like same as in jquery ? can we pass variable in directive using scope?
You need to pass the parameters from the isolated scope of your directive, and then inside your directive you need to use $
on directive element to make highcharts
method available.
Markup
<chart-test chart-title="chartTitle" x-axisarry="xAxisarry"
y-axis="yAxis" json-data="janeData" names="names"></chart-test>
Controller
.controller('MainCtrl', function($scope) {
$scope.chartTitle = "";
$scope.xAxisarry = ['Apples', 'Bananas', 'Oranges'];
$scope.yAxis = 'Fruit eaten';
$scope.data = {
jane: [1, 0, 4],
jone: [5, 7, 3]
};
$scope.names = ["jane", "jone"];
})
Directive
.directive('chartTest', function() {
return {
restrict: 'E',
scope: {
chartTitle: '=',
xAxisarry: '=',
yAxis: '=',
jsonData: '=',
names: '='
},
link: function(scope, element, attrs) {
$(element).highcharts({
chart: {
type: 'bar'
},
title: {
text: scope.chartTitle
},
xAxis: {
categories: scope.xAxisarry
},
yAxis: {
title: {text: 'Fruit eaten'}
},
series: [{
name: scope.names[0],
data: scope.jsonData['jane']
}, {
name: scope.names[1],
data: scope.jsonData['jone']
}]
});
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.