在列表项中显示 dygraph

Question

任何人都可以告诉我如何使用 json 响应在列表视图中显示 dygraph。这是我的回复，我需要从中制作 dygraph..我用眼睛盯着看，但没有得到任何线索。

http://piratepad.net/ep/pad/view/ro.y8PksMhLIhk/latest

我就是这样做的:-

在我的 Index.html 中：-

<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/dygraph-combined-dev.js"></script>
<script src="js/dygraph-combined.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

在我的 Home.html 中：-

<div ng-repeat="entry in listnew">
    <div class="bar bar-dark bar-head">
        <h2>Basestation {{entry.baseID}} {{entry.nickname}}</h2>
    </div>

    <ion-list>
    <div ng-repeat="scout in entry.scouts">
        <div class="wrap_home">
            <ion-item class="item-accordion" ng-click="toggleGroup(scout)"
                ng-class="{active: isGroupShown(scout)}" ng-init="showGraph(scout.tempHistory)">
            <div class="row">
                <div class="col col-25">
                    <div class="top_spc">
                        <b>{{scout.moduleID}}</b>
                    </div>
                </div>
                <div class="col col-25">
                    <div class="top_spc">{{scout.nickname}}</div>
                </div>
                <div class="col col-20">
                    <div class="top_spc temp_mid">
                        {{scout.temperature}}<sup>o</sup>C
                    </div>
                </div>
                <div class="col">
                    <div class="batt_icon ">
                        <img src="img/battery.png" alt="battery" />
                    </div>
                </div>
                <div class="col">
                    <div ng-if="scout.power=='0'">
                        <div class="plug_icon red">
                            <img src="img/plug.png" alt="plug" />
                        </div>
                    </div>
                    <div ng-if="scout.power=='1'">
                        <div class="plug_icon">
                            <img src="img/plug.png" alt="plug" />
                        </div>
                    </div>
                </div>
            </div>
            </ion-item>
            <ion-item class="item-accordion sm-item"
                ng-show="isGroupShown(scout)">
            <div class="sub_detail">

                <div class="row">
                    <div class="col col-50">
                        <b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}
                            min ago)</span>
                    </div>
                    <div class="col col-50">{{scout.tempLow}}(L),
                        {{scout.tempHigh}}(A), {{scout.tempAvrg}} (Avg)</div>
                </div>
                <div id=graph>
                </div>
                </div>
            </ion-item>
        </div>
    </div>
    </ion-list>
</div>

在我的 controller.js 中：-

$scope.showGraph = function(data) {                 
            g = new Dygraph(document.getElementById("graph"),
                    // For possible data formats, see http://dygraphs.com/data.html
                    // The x-values could also be dates, e.g. "2012/03/15"
                    data, {
                            // options go here. See http://dygraphs.com/options.html
                        legend : 'always',
                        animatedZooms : true,
                        title : 'dygraphs chart template'
                    });                 
        };

这里是我在盗版里显示的数据。
问题是我只在第一个项目上得到 dygraph 而不是在剩余的项目上。

Answer 1

给你:-

在您的 Controller.js 中定义：-

$scope.graphs = [
       {
        data : data(Place your JavaScript Array here),
       },

     ];

    })

.directive(
    'graph',
    function() {
     return {
      restrict : 'E',
      scope : {
       data : '=',
       opts : '='
      },
      template : '<div class="graph"></div><div class="labels"></div>',
      link : function(scope, elem, attrs) {
       var graph = new Dygraph(elem.children()[0],
         scope.data, scope.opts);
      }
     };
    });

在你的 Home.html 中定义：-

<ion-list>
 <div ng-repeat="scout in entry.scouts" >
  <div class="wrap_home">
   <ion-item class="item-accordion" ng-click="toggleGroup(scout,scout.tempHistory)"
    ng-class="{active: isGroupShown(scout)}" >
   <div class="row">
    <div class="col col-25">
     <div class="top_spc">
      <b>{{scout.moduleID}}</b>
     </div>
    </div>
    <div class="col col-25">
     <div class="top_spc">{{scout.nickname}}</div>
    </div>
    <div class="col col-20">
     <div class="top_spc temp_mid">
      {{scout.temperature}}<sup>o</sup>C
     </div>
    </div>
    <div class="col">
     <div class="batt_icon ">
      <img src="img/battery.png" alt="battery" />
     </div>
    </div>
    <div class="col">
     <div ng-if="scout.power=='0'">
      <div class="plug_icon red">
       <img src="img/plug.png" alt="plug" />
      </div>
     </div>
     <div ng-if="scout.power=='1'">
      <div class="plug_icon">
       <img src="img/plug.png" alt="plug" />
      </div>
     </div>
    </div>
   </div>
   </ion-item>
   <ion-item class="item-accordion sm-item"
    ng-show="isGroupShown(scout)">
   <div class="sub_detail">
   
    <div class="row">
     <div class="col col-50">
      <b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}
       min ago)</span>
     </div>
     <div class="col col-50">{{scout.tempLow}}(L),
      {{scout.tempHigh}}(A), {{scout.tempAvrg}} (Avg)</div>
    </div>
    <div  >
        <graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph>
</div>
    </div>
   </ion-item>
  </div>
 </div>
 </ion-list>

Dygraph 对 ng-repeat 有一些问题正如我在下面给出的 link 中读到的：-

Dygraphs not working with ng-repeat

在列表项中显示 dygraph

show dygraph in list items

dygraphs

angularjs

ionic