HighCharts 모듈 사용하기.

2021. 4. 13. 00:40 JavaScript FrontEnd/Angular

 

 

아직 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]