使用nvd3和AngualrJs動態創建餅圖

我有一個帶有Key和Value的API，使用它我想繪製餅圖但目前還沒有運氣。

這我都試過如此，

$scope.collectedData= 

      [ { 
       key:keys, 
       y: 541 
      }]; 


     $scope.xFunction = function() { 
      return function (d) { 
       return d.key; 
      }; 
     }; 

     $scope.yFunction = function(){ 
      return function (d) { 
       return d.y; 
      }; 
     }

HTML文件

<nvd3-pie-chart 
       data="collectedData" 
       id="toolTipExample1{{$index}}" 
       width="550" 
       height="350" 
       x="xFunction()" 
       y="yFunction()"tooltips="true"> 
     </nvd3-pie-chart>

這畫，因爲值已經定義的餅圖。但是如何從API中動態處理值呢？

歡迎任何建議。請幫助

來源

2014-09-29 GeekOnGadgets

代碼示例改編自http://demos.telerik.com/kendo-ui/radar-charts/angular

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link href="styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="styles/kendo.default.min.css" rel="stylesheet" /> 
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" /> 
    <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" /> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/angular.min.js"></script> 
    <script src="js/kendo.all.min.js"></script> 
</head> 
<body> 
    <div id="example" ng-app="KendoDemos"> 
    <div ng-controller="MyCtrl"> 
    <div class="demo-section k-content"> 
     <div class="box-col" style="width: 500px;"> 
      <h4>Hover some series</h4> 
      <div kendo-chart 
       k-title="{ text: '1024x768 screen resolution trends for 2009', position: 'bottom' }" 
       k-series-defaults="{ type: 'pie' }" 
       k-series="[{ 
           field: 'share', 
           categoryField: 'resolution', 
           padding: 0 
           }]" 
       k-data-source="screenResolution" 
       k-series-hover="onSeriesHover" 
       ></div> 
     </div> 
     <div class="box-col"> 
      <h4>Console</h4> 
      <div class="console"></div> 
     </div> 
    </div> 

    </div> 
<script> 
    angular.module("KendoDemos", [ "kendo.directives" ]); 
    function MyCtrl($scope) { 
     $scope.onSeriesHover = function(e) { 
      kendoConsole.log(kendo.format("event :: seriesHover ({0} : {1})", e.category, e.value)); 
     }; 

     $scope.screenResolution = new kendo.data.DataSource({ 
      transport: { 
       read: { 
        url: "../content/dataviz/js/screen_resolution.json", 
        dataType: "json" 
       } 
      }, 
      filter: { 
       field: "year", 
       operator: "eq", 
       value: 2009 
      } 
     }); 
    } 
</script> 
</div> 


</body> 
</html>

來源

2014-09-29 04:14:45

使用nvd3和AngualrJs動態創建餅圖

回答

相關問題