Question

我使用这个角度模块用于显示Highcharts图表的小部件，但由于某种原因它没有显示。我有模块名称和控制器名称，但在html中声明，但我想我错过了什么？

angular.module('myapp', ['cgOwf'])
  .controller('mainctrl', function($scope, $element, $attrs, $http, $interval, owf) {
        $scope.jsondata = [];
        var mainInterval = '';
        $scope.username = '';
        owf.ready(function() {
          owf.Eventing.subscribe('traffic-channel', function(sender, msg, channel) {
            console.debug("Got " + msg + " inside of owf ready");
            $scope.username = msg;
            console.log($scope.username);
            //-----------------------------------------------
            $scope.chart = new Highcharts.Chart({
              chart: {
                renderTo: 'container',
                type: 'areaspline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                  load: function() {
                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function() {
                      var x = (new Date()).getTime(), // current time
                        y = Math.random() * .5;
                      series.addPoint([x, y], true, true);
                    }, 5000);
                  }
                }
              },
              title: {
                text: ''
              },
              xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
              },
              yAxis: {
                title: {
                  text: 'Value'
                },
                plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#d9534f'
                }]
              },
              tooltip: {
                formatter: function() {
                  return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
                }
              },
              legend: {
                enabled: false
              },
              exporting: {
                enabled: false
              },
              credits: {
                enabled: false
              },
              series: [{
                name: 'Random data',
                data: (function() {
                  // generate an array of random data
                  var data = [],
                    time = (new Date()).getTime(),
                    i;
                  for (i = -10; i <= 0; i += 1) {
                    data.push({
                      x: time + i * 1000,
                      y: Math.random() * .2
                    });
                  }
                  return data;
                }())
              }]
            });
          });
        });
      }
  }));

从//---------------------------下来，它实际上只是设置图表，所以我猜这个部分就在上面。这是html，但这应该是正确的，因为我已经完成了几次：

<body ng-app="myapp" ng-controller="mainctrl">
    <div id="wrapper">
        <div style="margin: 1em">
            <h4>Traffic <span ng-show="username"> for {{username}}</span></h4>

                <div id="container" class="barchart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

        </div>
    </div>
    <!--Scripts-->
    <script src="js/owf/owf-widget-debug.js"></script>
    <script src="js/owf/owf-widget-min.js"></script>
    <script src="js/owf/angular-owf.js"></script>
</body>

角度模块不显示

0 个答案: