Question

任何人都能告诉我如何使用json响应在listview中显示dygraph。这是我的反应，我需要制作dygraph..i，但它没有得到任何线索。

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问题正如我在下面给出的链接中所读到的那样： -

Dygraphs not working with ng-repeat

在列表项中显示dygraph

1 个答案: