如何使用angularjs在canvasjs圖表中分配動態值

如何使用angularjs在canvasjs中顯示動態數據。即時消息從API獲取數據，並希望顯示在圖表中。我不知道如何將變量分配給chart.im的y點獲取值並存儲在變量「ValueinCm」中，而不是靜態變量需要分配動態值。如何使用angularjs在canvasjs圖表中分配動態值

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
     <script> 
     var filledValue; 
     var app = angular.module('myApp', ["ng-fusioncharts"]) 
     app.controller('MyController', function ($scope, $http) { 
      $http.get('https://example.com', { 
       headers: { 'Authorization': 'Basic password==' } 
      }) 
      .then(function (response) { 
       $scope.names = response.data; 
       $scope.decodedFrame = atob($scope.names.dataFrame); 
       $scope.decodedFrameNew = $scope.decodedFrame.substring(4); 
       $scope.distanceinFeet = $scope.decodedFrameNew * 12.5*2.54; 
       $scope.Value = $scope.distanceinFeet/148; 
       $scope.ValueinCm = $scope.Value.toFixed(2); 
       filledValue = $scope.ValueinCm; 
       console.log(filledValue); 
      }); 
     }); 
     window.onload = function() { 
      var chart = new CanvasJS.Chart("chartContainer", { 
       theme: "theme2",//theme1 
       title: { 
        text: "Basic Column Chart - CanvasJS" 
       }, 
       animationEnabled: false, // change to true 
       data: [ 
       { 
        // Change type to "bar", "area", "spline", "pie",etc. 
        type: "column", 
        dataPoints: [ 
         { label: "apple", y: filledValue }, 
         { label: "orange", y: 15 }, 
         { label: "banana", y: 25 }, 
         { label: "mango", y: 30 }, 
         { label: "grape", y: 28 } 
        ] 
       } 
       ] 
      }); 
      chart.render(); 
     } 
     </script> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="MyController"> 
     <div id="chartContainer" style="height: 300px; width: 100%;"></div></div> 
</body>

來源

2017-02-17 Swapna

提取數據後，您需要將它存儲到一個變量（比如數據）中，該變量應該是一個對象數組。您需要確保該變量以CanvasJS規定格式存儲數據。稍後，您可以使用此變量來代替靜態數據。

dataPoints: data

這裏是一個工作jsFiddle

來源

2017-02-21 06:43:11

如何使用angularjs在canvasjs圖表中分配動態值

回答

相關問題