2016-12-22 2 views
0

Ich habe benutzerdefinierte Anweisung erstellt, um High-Chart-Daten zu erhalten. Stift ist here Aber es gibtverwenden Richtlinie mehr von Controller in High Chart

$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] 
        }] 
       }; 

Code in Controller. Ich möchte diese Sache alle in der Richtlinie setzen und setzen 1 json Objekt (Kategorie: Datenschlüsselwert) Probe wie Fiddle

+0

ja . Richtlinie kann einen eigenen Controller haben, kann andere Richtlinien enthalten usw. –

+0

können Sie mit diesem Codepen lösen. Es ist dringend für mich – Anuj

Antwort

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>

Bitte diese Schnipsel finden hoffen, dass es hilft

+0

Danke, aber ich will das nicht. Ich will das xAxis: { Kategorien: ['Jan', 'Feb', 'März', 'April', 'Mai', 'Juni', "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, Serie: [{ Daten: [35, 21, 112.2, 10.1, 230.2, 174.0, 198.2 , 139.4, 232, 23, 62, 234] }] Daten nur im Controller, überprüfen Sie http://codepen.io/anujsphinx/pen/PbgQEg genauso wie in Liniendiagramm und Tooltip – Anuj

+0

Verzeihen Sie mir @Anuj, aber ich kann ' Verstehst du nicht, was du tun willst? Sei konkret, was du erwartest und an welchem ​​Punkt du ein Problem hast. – Curiousdev

+0

Endlich habe ich das von myslef gemacht. http://codepen.io/anujsphinx/pen/JbVpvp; http://codepen.io/anujsphinx/pen/PbgQEg; Ich möchte nur Array in Controller – Anuj

Verwandte Themen