Question

使用图表js并让它做我需要的工作，即从Web服务中提取数据并使用$interval进行更新。当我使用内置更新功能更新图表时，它会按预期再次显示，但也会显示旧数据。我以为我正在从数组中清除数据，我对角度更新，所以也许我忽略了一些东西。

这是发生了什么的js。

angular.module('myapp', [])
  .controller('MainCtrl', function($scope, $http, $interval) {
    $scope.doughnutData = [];
    var myDoughnut = '';
    onload = function() {
      $http.get('https://api.myjson.com/bins/59zvx').success(function(returnedData) {

        $scope.username = returnedData.name;
        $scope.totalscore = returnedData.totalScore.toFixed(3);

        returnedData.models.forEach(function(x) {
          var score = x.score.toFixed(3);
          console.debug(score);
          if (score >= 75) {
            $scope.doughnutData.push({
              'value': x.score,
              'color': '#F7464A',
              'highlight': '#FF5A5E',
              'label': x.name
            });
          } else if (score >= 50) {
            $scope.doughnutData.push({
              'value': x.score,
              'color': '#FDB45C',
              'highlight': '#FFC870',
              'label': x.name
            });
          } else {
            $scope.doughnutData.push({
              'value': x.score,
              'color': '#424242',
              'highlight': '#686868',
              'label': x.name
            });
          }
        });
        $scope.doughnutData = sortByKey($scope.doughnutData, 'value');
        var ctx = document.getElementById("chart-area").getContext("2d");
        myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
          responsive: true
        });
      });
      mainInterval = $interval(function() {
         doughnutData = '';
        $http.get('https://api.myjson.com/bins/59zvx').success(function(returnedData) {
          $scope.username = returnedData.name;
          $scope.totalscore = returnedData.totalScore.toFixed(3);

          returnedData.models.forEach(function(x) {
            var score = x.score.toFixed(3);
            console.debug(score);
            if (score >= 75) {
              $scope.doughnutData.push({
                'value': x.score,
                'color': '#F7464A',
                'highlight': '#FF5A5E',
                'label': x.name
              });
            } else if (score >= 50) {
              $scope.doughnutData.push({
                'value': x.score,
                'color': '#FDB45C',
                'highlight': '#FFC870',
                'label': x.name
              });
            } else {
              $scope.doughnutData.push({
                'value': x.score,
                'color': '#424242',
                'highlight': '#686868',
                'label': x.name
              });
            }
          });
          $scope.doughnutData = sortByKey($scope.doughnutData, 'value');
          myDoughnut.segments = doughnutData;
          myDoughnut.update();
        });
      }, 5000);
      $scope.$apply();
    };

    function sortByKey(array, key) {
      return array.sort(function(a, b) {
        var x = a[key];
        var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
      });
    }
  });

所以它从9个值开始，当它更新时它有18个等等。目前没有任何东西会更新（我现在就把它移到我的生产webservice中）。我在想doughnutData = '';部分的$interval会清除它吗？

希望包含html以更好地了解正在发生的事情：

<html>

  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="../Chart.js"></script>
    <script src="../src/Chart.Doughnut.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="../script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="MainCtrl">
    <div id="canvas-holder">
      <canvas id="chart-area" width="50" height="50"></canvas>
    </div>
  </body>

</html>

Answer 1

尝试更改mainInterval函数

doughnutData = '';

带

$scope.doughnutData = [];

在角度中，您可以通过$ scope对象访问字段

Answer 2

    public static object GetAssembly(string assemblyPath, string typeName)
    {
        AssemblyName assamblyName = AssemblyName.GetAssemblyName(assemblyPath);
        Assembly assembly = Assembly.Load(assamblyName);
        Type type = assembly.GetType(typeName);
        object instanceOfMyType = Activator.CreateInstance(type);
        return instanceOfMyType;
    }

甜甜圈图表更新两倍的数据

2 个答案: