在饼图中使用角度值

时间:2015-08-21 17:12:09

标签: javascript angularjs charts pie-chart

我使用ng-repeat从表中派生长度值。我想在饼图中使用这些值,但无法弄清楚如何这样做。以下是我的价值观:

<table >

<tr style="background-color:#575757; padding:10px">
    <th width="80">PM Alert Green</th>

  </tr>
    <tr ng-repeat="pmalert in pmalertcountgreen = (sites |  filter : {pmAlert: 'green' })">

        <td>{{pmalert.pmAlert}}</td>

    </tr>
</table>

<table >

<tr style="background-color:#575757; padding:10px">
    <th width="80">PM Alert</th>



  </tr>
    <tr ng-repeat="pmalert in pmalertcount = (sites |  filter : {pmAlert: 'red' })">

        <td>{{pmalert.pmAlert}}</td>

    </tr>
</table>

<h3>PM Alert Filtered: {{pmalertcount.length}} </h3>
<h3>PM Alert Filtered: {{pmalertcountgreen.length -1}} </h3>

这是我想要使用的饼图:

angular.module('plunker', ['angularCharts']);

function PiechartCtrl($scope) {
  $scope.config = {
title: 'Site Phases:',
tooltips: true,
labels: true,
mouseover: function() {},
mouseout: function() {},
click: function() {},
legend: {
  display: false,
  //could be 'left, right'
  position: 'right'
}
  };

  $scope.data = {
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
  x: "",
  y: [100],
  tooltip: "Pre-Submittal"
}, {
  x: "Zoning",
  y: [500],
  tooltip: "In Zoning"
}, {
  x: "Building",
  y: [200],
  tooltip: "In Building"
}, {
  x: "Construction",
  y: [54],
  tooltip: "In Construction"
}]
};
}

以下是HTML部分:

   <div ng-controller="PiechartCtrl">
 <div 
data-ac-chart="'pie'" 
data-ac-data="data" 
data-ac-config="config" 
class="chart">
  </div>

或者如果有更好的方法,请告诉我。谢谢。

0 个答案:

没有答案