2016-12-22 4 views
0

Я создал специальную директиву для получения высоких данных диаграммы. перо here Но естьиспользовать директиву больше от контроллера в диаграмме высокого уровня

$scope.chartData = { 
      title: { 
        text: 'Sales Statics' 
        }, 
      xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
        }, 
      series: [{ 
        data: [35, 21, 112.2, 10.1, 230.2, 174.0, 198.2, 139.4, 232, 23, 62, 234] 
        }] 
       }; 

код в контроллере. Я хочу, чтобы поставить все это дело в директиве и положить 1 объект JSon (Категория: данные ключа) образец как Fiddle

+0

да , директива может иметь свой собственный контроллер, он может включать в себя другие директивы и т. д. –

+0

вы можете решить этот код. Это срочно для меня – Anuj

ответ

0

angular.module('tesTModule', []) 
 
    // Directive for generic chart, pass in chart options 
 
    .directive('myChart', function() { 
 
    var controller = ['$scope', function($scope) { 
 

 
     $scope.chartData = { 
 
     title: { 
 
      text: 'Sales Statics' 
 
     }, 
 
     xAxis: { 
 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
 
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
 
      ] 
 
     }, 
 
     series: [{ 
 
      data: [35, 21, 112.2, 10.1, 230.2, 174.0, 198.2, 139.4, 232, 23, 62, 234] 
 
     }] 
 
     } 
 
    }] 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     options: '=' 
 
     }, 
 
     controller: controller, 
 
     link: function(scope, element) { 
 
     Highcharts.chart(element[0], scope.chartData); 
 
     } 
 
    }; 
 
    }) 
 
    .controller('moglixController', function($scope) { 
 
    //Moved controller code to directive's controller 
 
    });
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html ng-app="tesTModule"> 
 
    <meta charset="utf-8" /> 
 
    <title> Charts With custom directive </title> 
 
<body ng-controller="moglixController"> 
 
    <my-Chart options="chartData" style="width:100%"></my-Chart> 
 
    </body> 
 
</html>

Вы можете найти этот фрагмент кода надеюсь, что это помогает

+0

Спасибо, но я не хочу этого. Я хочу, чтобы xAxis: { категорий: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', «Июль», «август», «сентябрь», «октябрь», «ноябрь», «декабрь» ] }, серия: [{ данные: [35, 21, 112,2, 10,1, 230,2, 174,0, 198,2 , 139.4, 232, 23, 62, 234] }] данные только в контроллере, проверьте http://codepen.io/anujsphinx/pen/PbgQEg так же, как в линейной диаграмме и подсказке – Anuj

+0

Простите меня @ Анудж, но я могу " Понимаете, что вы хотите сделать? быть конкретным, что вы ожидаете, и в какой момент у вас есть проблема. – Curiousdev

+0

Наконец, я сделал это с помощью myslef. http://codepen.io/anujsphinx/pen/JbVpvp; http://codepen.io/anujsphinx/pen/PbgQEg; Я хочу только массив в контроллере – Anuj