Angular js 지시어를 사용한 하이차트 렌더링

Angular js 지시어를 사용한 하이차트 렌더링

저는 Angular JS에 익숙하지 않기 때문에 지시문을 작성하여 하이차트(기본선)를 렌더링하려고 합니다.여기서 어떻게 하면 좋을지 알려주세요.어떤 도움이라도 주시면 감사하겠습니다.

하이차트를 위한 대본은 다음과 같습니다.

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});


    </script>

원형 차트의 예:

http://jsfiddle.net/csTzc/

    function MyCtrl($scope, limitToFilter) {
  $scope.ideas = [
    ['ideas1', 1],
    ['ideas2', 8],
    ['ideas3', 5]
  ];

  $scope.limitedIdeas = limitToFilter($scope.ideas, 2);
}

angular.module('myApp', [])
  .directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
      console.log(2);

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
      var chart = new Highcharts.Chart(options);
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);

    }
  }
});

다른 구현은 이쪽: http://jsfiddle.net/pablojim/Cp73s/

https://github.com/pablojim/highcharts-ng 를 사용합니다.

그러면 다음 html을 사용하여 하이차트를 작성할 수 있습니다.

<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>

위의 경우chart.series는 그래프상의 시리즈를 나타내는 javascript 객체의 배열입니다.이러한 객체에는 표준 하이차트 옵션이 있습니다.그런 다음 angularjs에 의해 변경 여부가 감시됩니다.

chart.options는 하이차트 초기화 옵션입니다.또한 변경을 감시하고 있습니다.이 변경 사항을 적용하면 전체 차트가 다시 작성됩니다.

chart.title는 하이차트 제목 객체이며 변경 여부도 감시됩니다.

app.directive('hcChart', function () {
	return {
			restrict: 'A',
			template: '<div></div>',
			scope: {
					options: '='
				},
			link: function (scope , element, attribute) {
                Highcharts.chart('chart', {
                	 chartOptions: {
                         type: 'line'
                    },
                     
                     title: {
                        text: 'Temperature data'
                     },
                 series: [{
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                     }]
                });
			}
	}
			
});

<div id="chart" hc-chart>Placeholder for generic chart</div>

Make sure highchart lib is added in your index.html

언급URL : https://stackoverflow.com/questions/15904739/rendering-highcharts-using-angular-js-directives