HighCharts 모듈 사용하기.
아직 AngularJS에 대해서 많은것을 알지는 못하지만, AngularJS의 커스텀 디렉티브는 굉장히 유용할 것 같다.
그 중, HighCharts를 AngualrJS를 통해서 쉽게 사용할 수 있는 HighCharts 모듈을 소개해볼까 한다.
아래 주소에 더 많은 정보가 있다.
http://ngmodules.org/modules/highcharts-ng
예제를 확인해보자.
HTML
<body ng-controller="ngCtrl">
<h1>HighCharts - angularModule</h1>
<highchart config="highchartsConfig"></highchart>
<span class="pull-right"><button class="btn btn-primary" ng-click="loadChart()">ReLoad</button></span>
</body>
JavaScript
app.controller('ngCtrl', function($scope) {
$scope.loadChart = function() {
var rnd = [];
for (var i = 0; i < 10; i++) {
rnd.push(Math.floor(Math.random() * 20) + 1)
}
$scope.highchartsConfig.series = [{
data: rnd
}];
}
$scope.highchartsConfig = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
loading: false
};
});결과를 확인해보자.
http://embed.plnkr.co/7lZPCvBzd74y8cPvXULF/
이제 ngCtrl의 highchartsConfig 오브젝트의 속성값을 변경해서 손쉽게 HighCharts를 적용할 수 있다.
출처: https://jason-moon.tistory.com/100?category=610235 [Programmer]
'JavaScript FrontEnd > Angular' 카테고리의 다른 글
| [Angular] Data Binding (데이터 바인딩) (0) | 2021.04.29 |
|---|---|
| [Angular] 02.튜토리얼 (4~8) (0) | 2021.04.29 |
| [Angular] 01.튜토리얼(1~3) (0) | 2021.04.29 |
| [Angular] 튜토리얼(Introduction, The Application Shell, The Hero Editor) (0) | 2021.04.29 |
| [Angular] 시작하기 (0) | 2021.04.29 |
| AngularJS를 이용한 From Validation. (0) | 2021.04.13 |
| AngularJS 양방향 데이터 바인딩 (0) | 2021.04.13 |
| AngularJS와 jQuery의 간단한 비교.. (0) | 2021.04.13 |