AngularJS directive for Highcharts

highchart.directive.js

(function () {
  'use strict';
 
  angular.module('ngHighchart')
    .directive('chart', function () {
      Highcharts.setOptions({
        lang: {
          loading: '로딩중...',
          months: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
          shortMonths: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
          weekdays: ['일', '월', '화', '수', '목', '금', '토'],
          printChart: "차트 출력하기",
          exportButtonTitle: '내보내기',
          printButtonTitle: '출력',
          rangeSelectorFrom: '시작일',
          rangeSelectorTo: '종료일',
          rangeSelectorZoom: "확대",
          downloadPNG: 'PNG로 내려받기',
          downloadJPEG: 'JPG로 내려받기',
          downloadPDF: 'PDF로 내려받기',
          downloadSVG: 'SVG로 내려받기',
          thousandsSep: ',',
          resetZoom: "확대 초기화",
          resetZoomTitle: "확대를 1:1 비율로 초기화",
          numericSymbols: [
            "k", // kilo : thousand
            "M", // mega : million
            "G", // giga : billion
            "T", // tera : trillion
            "P", // peta : quadrillion
            "E"  // exa : quintillion
          ]
        },
        tooltip: {
          dateTimeLabelFormats: {
            "millisecond": "%b %e일(%A), %H:%M:%S.%L",
            "second": "%b %e일(%A), %H:%M:%S",
            "minute": "%b %e일(%A), %H:%M",
            "hour": "%b %e일(%A) %H:%M",
            "day": "%Y년 %b %e일(%A)",
            "week": "%Y %b %e일 %A요일",
            "month": "%Y %B",
            "year": "%Y"
          }
        },
        rangeSelector: {
          /*------ Highstock date range selector (the 2 little inputs in right corner) ------ */
          inputDateFormat: '%Y-%m-%d',
          inputEditDateFormat: '%Y-%m-%d',
          inputDateParser: function (value) {
            value = value.split('-');
            return new Date(
              parseInt(value[0]),
              parseInt(value[1]) - 1,
              parseInt(value[2])
            );
          },
          buttons: [{
            type: 'day',
            count: 3,
            text: '3일'
          }, {
            type: 'week',
            count: 1,
            text: '1주'
          }, {
            type: 'month',
            count: 1,
            text: '1달'
          }, {
            type: 'month',
            count: 6,
            text: '6개월'
          }, {
            type: 'year',
            count: 1,
            text: '1년'
          }, {
            type: 'all',
            text: '전체'
          }],
        },
        credits: {
          enabled: false
        }
      });
 
      return {
        restrict: 'E',
        template: '<div></div>',
        scope: {
          chartData: "=value",
          chartObj: "=?",
          chartTitle: "=?"
        },
        transclude: true,
        replace: true,
        link: function ($scope, $element, $attrs) {
 
          //Update when charts data changes
          $scope.$watch('chartData', function (value) {
            if (!value)
              return;
 
            // Initiate the chartData.chart if it doesn't exist yet
            $scope.chartData.chart = $scope.chartData.chart || {};
 
            // use default values if nothing is specified in the given settings
            $scope.chartData.chart.renderTo = $scope.chartData.chart.renderTo || $element[0];
 
            //$scope.chartData.chart.width = window.innerWidth;
 
            if ($attrs.type) {
              $scope.chartData.chart.type = $scope.chartData.chart.type || $attrs.type;
            }
 
            if ($attrs.height) {
              $scope.chartData.chart.height = $scope.chartData.chart.height || $attrs.height;
            }
 
            if ($attrs.width) {
              $scope.chartData.chart.width = $scope.chartData.chart.width || $attrs.width;
            }
 
            if ($scope.chartTitle) {
              $scope.chartData.title = {text: $scope.chartTitle};
            }
 
            if ($attrs.type.indexOf('Stock') > -1) {
              $scope.chartObj = new Highcharts.StockChart($scope.chartData);
            } else {
              $scope.chartObj = new Highcharts.Chart($scope.chartData);
            }
          });
        }
      }
    });
})();