[英]angularjs div with ng repeat dont show dygraph
我想在json中繪制圖形。 每個鍵都是一個圖,在我的情況下,我有3個節點,因此我將顯示3個圖。
這是我的json:
{"disk_svctm_sda":{"data":[["2017-12-21T13:26:50.000Z",0],["2017-12-21T13:31:50.000Z",0],["2017-12-21T13:36:50.000Z",0],["2017-12-21T13:41:50.000Z",0],["2017-12-21T13:46:50.000Z",0],["2017-12-21T13:51:50.000Z",0],["2017-12-21T13:56:50.000Z",0],["2017-12-21T14:01:50.000Z",0],["2017-12-21T14:06:50.000Z",0],["2017-12-21T14:11:50.000Z",0],["2017-12-21T14:16:50.000Z",0],["2017-12-21T14:21:50.000Z",0]],"options":{"labels":["Date","svctm"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Service Time","axes":{"y":{"valueRange":[0,"0.13"]}}}},"disk_util_sda":{"data":[["2017-12-21T13:25:00.000Z",0],["2017-12-21T13:30:00.000Z",0],["2017-12-21T13:35:00.000Z",0],["2017-12-21T13:40:00.000Z",0],["2017-12-21T13:45:00.000Z",0],["2017-12-21T13:50:00.000Z",0],["2017-12-21T13:55:00.000Z",0],["2017-12-21T14:00:00.000Z",0],["2017-12-21T14:05:00.000Z",0],["2017-12-21T14:10:00.000Z",0],["2017-12-21T14:15:00.000Z",0],["2017-12-21T14:20:00.000Z",0]],"options":{"labels":["Date","utilization"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Usage Time","axes":{"y":{"valueRange":[0,"0.13"]}}}},"disk_usage":{"data":[["2017-12-21T13:24:58.000Z",0.19,0.04,0],["2017-12-21T13:29:58.000Z",0.19,0.04,0],["2017-12-21T13:34:58.000Z",0.19,0.04,0],["2017-12-21T13:39:58.000Z",0.19,0.04,0],["2017-12-21T13:44:58.000Z",0.19,0.04,0],["2017-12-21T13:49:58.000Z",0.19,0.04,0],["2017-12-21T13:54:58.000Z",0.19,0.04,0],["2017-12-21T13:59:58.000Z",0.19,0.04,0],["2017-12-21T14:04:58.000Z",0.19,0.04,0],["2017-12-21T14:09:58.000Z",0.19,0.04,0],["2017-12-21T14:14:58.000Z",0.19,0.04,0],["2017-12-21T14:19:58.000Z",0.19,0.04,0]],"options":{"labels":["Date","avail","used","reserved for root"],"showRangeSelector":true,"legend":"always","ylabel":"GBytes","title":"Space Usage","axes":{"y":{"valueRange":[0,"0.65"]}}}}}
我有鍵“ disk_svctm_sda”,“ disk_util_sda”和“ disk_usage”,其中一個已滿載“數據”和“選項”。
我無法找到一種方法來顯示頁面中的三個圖表。.目前,控制台上沒有錯誤,也沒有類似以下圖像的顯示。
我使用指令來綁定元素以創建圖形。
(function() {
var app = angular.module('dashboard.view', []);
app.directive('dygraph', function(){
return {
restrict: 'E',
scope: {
data : '=',
options : '=?'
},
template: '<div style="width: 100%"></div>',
link: function (scope, elem, attrs) {
if(scope != undefined && scope.options !=undefined){
scope.options.width = elem.parent()[0].offsetWidth;
var graph = new Dygraph(elem.children()[0], scope.data, scope.options);
}
}
};
});
})();
我的HTML代碼繪制圖表:
<tabset class="box-tab box-tab-sub">
{{dataGraph.system.disk}}
<tab ng-repeat="type in dataGraph.system.types track by type" heading="{{dataGraph.system.labels[$index]}}" select="changeSubTab(type)" disable="!tabClick">
<div ng-if="type==='disk'">
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="disk in dataGraph.system[type]" ng-if="type!='disk'">
<img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="disk.options">
{{disk.options}}
{{disk.data}}
<dygraph options='disk.options' data="disk.data"></dygraph>
<br>
</div>
</div>
</tab>
</tabset>
有人可以幫助我嗎?
您的HTML標記中缺少</div>
結束標記-
<tabset class="box-tab box-tab-sub">
{{dataGraph.system.disk}}
<tab ng-repeat="type in dataGraph.system.types track by type" heading="{{dataGraph.system.labels[$index]}}" select="changeSubTab(type)" disable="!tabClick">
<div ng-if="type==='disk'">
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="disk in dataGraph.system[type]" ng-if="type!='disk'">
<img ng-if="!disk.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="disk.options">
{{disk.options}}
{{disk.data}}
<dygraph options='disk.options' data="disk.data"></dygraph>
<br>
</div>
</div> <!-- <<<< HERE -->
</tab>
</tabset>
在第二個ng-repeat中,您嘗試迭代對象,而不是數組。 像這樣使用它並刪除矛盾的ng-if,因為此時類型始終是'disk':
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="(disk_type,disk) in dataGraph.system[type]" >
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.