Question

我想在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"]}}}}}

我有密钥＆＃34; disk_svctm_sda＆＃34;，＆＃34; disk_util_sda＆＃34;和＆＃34; disk_usage＆＃34; anc eahc有一个＆＃34;数据＆＃34;和＆＃34;选项＆＃34; fullfiled。

我无法想象一种在我的页面中显示三个图形的方法..此时控制台上没有错误，也没有显示如下图所示。

我使用指令绑定元素以创建图形。

(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>

任何人都可以帮助我？

Answer 1

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-if，因为类型永远是＆＃39; disk＆＃39;在这一点上：

<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="(disk_type,disk) in dataGraph.system[type]" >

angularjs div with ng repeat不要显示dygraph

1 个答案: