我无法使用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

回答

相关问题