我無法使用json響應來顯示動態餅圖，使用canvas.min.js和angularjs

我以餅圖中的數據點所需的確切形式返回數據（scope.myData與scopes中的數據相同）....但值不顯示在餅圖...但如果我在var中給相同的json格式並將其分配給數據點它的工作正常（scope.s）...我不明白爲什麼？我無法使用json響應來顯示動態餅圖，使用canvas.min.js和angularjs

<!DOCTYPE html> 
    <html data-ng-app="myapp"> 
    <head> 
    <meta charset="ISO-8859-1"> 
    <title>AngularJS Tutorial</title> 
    <script 
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"> 
    </script> 
    <script> 
    var app = angular.module('myapp',[ ]); 

    app.controller('HelloWorldController', function($scope, $http){ 
    var res = $http.get('http://localhost:8088/api/user/'); 
    res.success(function(data, status, headers, config) { 
     $scope.myData = data; 
    }); 
    res.error(function(data, status, headers, config) { 
     alert("failure message: " + JSON.stringify({data: data})); 
    }); 
    $scope.s= [{"y":1,"legendText":"DB 
     check","label":"DB","color":"green"},{"y":1,"legendText":"F 
     check","label":"Folder","color":"red"}] 

    $scope.chart1 = new CanvasJS.Chart("chartContainer", 
      { 
       title:{ 
        text: "Statistics of health check " 
       }, 
         animationEnabled: true, 
       legend:{ 
        verticalAlign: "center", 
        horizontalAlign: "left", 
        fontSize: 20, 
        fontFamily: "Helvetica"   
       }, 
       theme: "theme2", 
       data: [ 
       {   
        type: "pie",  
        indexLabelFontFamily: "Garamond",  
        indexLabelFontSize: 20, 

        indexLabel: "{label} {y}%", 
        startAngle:-20,  
        showInLegend: true, 
        toolTipContent:"{legendText} {y}%", 
        dataPoints:$scope.myData //This is where problem lies 
       } 
       ] 
      }); 
      $scope.chart1.render();  
    }); 
    </script> 

    <script type="text/javascript" 
src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 

</head> 
<body data-ng-controller="HelloWorldController"> 

    <h1>You selected: 

    {{myData}} 
    </h1> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div> 

</body> 
    </html>

來源

2017-08-29 rahul

你可以做'$ scope.myData'及的控制檯日誌檢查什麼是它的輸出？ –

似乎您在圖表後獲得API響應。你可以把console.log for myData。 – NNR

其打印未定義爲console.log – rahul

您創建了顯式對象並傳遞給new CanvasJS.Chart。

不要使用myData，更新所有的圖表選項和重新渲染：

閡：$scope.chart1 = new CanvasJS.Chart("chartContainer",$scope.options);

和（虛擬數據）：

$scope.options.data[0].dataPoints = [ 
       { label: "apple", y: 10 }, 
       { label: "orange", y: 15 }, 
       { label: "banana", y: 25 }, 
       { label: "mango", y: 30 }, 
       { label: "grape", y: 28 } 
      ]; 
$scope.chart1.render();

這裏的工作演示：

Demo Plunker

代碼

var app = angular.module('myapp',[ ]); 

    app.controller('HelloWorldController', function($scope, $http){ 

    var res = $http.get('http://localhost:8088/api/user/'); 
    res.success(function(data, status, headers, config) { 
     // your code 
    }); 
    res.error(function(data, status, headers, config) { 

      // fore testing I just use error callback to render async 
      $scope.options.data[0].dataPoints = [ 
       { label: "apple", y: 10 }, 
       { label: "orange", y: 15 }, 
       { label: "banana", y: 25 }, 
       { label: "mango", y: 30 }, 
       { label: "grape", y: 28 } 
      ]; 

      $scope.chart1.render(); 
    }); 
    $scope.s= [ 
     {"y":1,"legendText":"DB check","label":"DB","color":"green"}, 
     {"y":1,"legendText":"F check","label":"Folder","color":"red"}]; 

    $scope.options = { 
       title:{ 
        text: "Statistics of health check " 
       }, 
         animationEnabled: true, 
       legend:{ 
        verticalAlign: "center", 
        horizontalAlign: "left", 
        fontSize: 20, 
        fontFamily: "Helvetica"   
       }, 
       theme: "theme2", 
       data: [ 
       {   
        type: "pie",  
        indexLabelFontFamily: "Garamond",  
        indexLabelFontSize: 20, 

        indexLabel: "{label} {y}%", 
        startAngle:-20,  
        showInLegend: true, 
        toolTipContent:"{legendText} {y}%", 
        dataPoints:[] 
       } 
       ] 
      }; 

    $scope.chart1 = new CanvasJS.Chart("chartContainer",$scope.options); 

       $scope.chart1.render(); 


    });

來源

2017-08-29 06:04:50

感謝您的答案......但我認爲問題是在響應數據...其打印未定義，當我使用console.log，但是當我使用{{myData}}它的打印確切形式，我想要 – rahul

請發佈JSON，你'成功'。你應該寫一些像'$ scope.options.data [0] .dataPoints = data;'不要忘記調用'$ scope.chart1.render（）; ' –

之後是的，我爲console.log（$ scope.options.data [0] .dataPoints）打印[]和{{options.data [0] .dataPoints}}打印了相同的內容在$ scope.s – rahul

我無法使用json響應來顯示動態餅圖，使用canvas.min.js和angularjs

回答

相關問題