Highcharts + AngularJS上的随机数

Random number on Highcharts + AngularJS

本文关键字:随机数 AngularJS Highcharts      更新时间:2023-09-26

我正在尝试创建一个生成随机数的图表,并在单击按钮后更新最大值。

这是我的控制器:

$scope.max = 1;
$scope.randomNumber = function(max,min) {
  var arr = [];
  for (var i = 0; i < 60; i++) {
    arr.push(Math.floor(Math.random()*(max-min+1)+min));
  }
  return arr;
}
  $('#chart').highcharts({
    series: [{
      data: (function () {
        var data = [];
        for (var i = 0; i < 60; i++) {
          data.push({
            x: i,
            y: $scope.randomNumber($scope.max,0)[0]
          });
        }
        return data;
      }())
    }]
  });

这是应该更新最大值的 HTML:

<button ng-click="max = 10">10</button>
<button ng-click="max = 100">100</button>
<button ng-click="max = 1000">1000</button>
<button ng-click="max = 10000">10000</button>

但是,它不会更新最大值。有什么提示吗?

这是一个普伦克:http://plnkr.co/edit/N0UfORtSjYW5jaPGojXH?p=preview

更改最大值时,需要重新绘制图表。

查看 plnkr 我观察最大值,当最大值变化时调用绘制函数。

  $scope.draw = function() {
    $('#chart').highcharts({
      series: [{
        data: (function() {
          var data = [];
          for (var i = 0; i < 60; i++) {
            data.push({
              x: i,
              y: $scope.randomNumber($scope.max, 0)[0]
            });
          }
          return data;
        }())
      }]
    });
  }
  $scope.draw();
  $scope.$watch('max', function() {
    $scope.draw();
  });

http://plnkr.co/edit/Cp0V46z7UgnRiQsKNrtl?p=preview