在High Chart中使用更多来自控制器的指令

时间:2016-12-22 15:00:31

标签: javascript angularjs ionic-framework angular-directive

我创建了自定义指令来获取高图表数据。笔是 here 但是有

public class BrowserOpen extends JFrame {
  private final JTextField urltxt; // to be init'ed in your constructor for example

控制器中的代码。我想把所有这些东西都放在指令中并把1个json对象(类别:数据键值)样本像 Fiddle

1 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;

请找到这个片段希望它有所帮助