本文介绍了无法使用D3和Angularjs-nvd3-directives在一个页面上显示多个图形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用NVD3和angular指令使用Angularjs-nvd3指令。我没有创建图形的问题,但是一旦我尝试显示两个图形,只有饼图将显示。

I am using NVD3 and angular directives using Angularjs-nvd3-directives. I have no problems creating a graph but as soon as I try to display two graphs on the only the pie chart will show. http://cmaurer.github.io/angularjs-nvd3-directives/stacked.area.chart.html

HTML

<div>
    <nvd3-pie-chart 
        data="exampleData" 
        id="dashPieGraph" 
        width="400" 
        height="350" 
        x="xFunction()" 
        y="yFunction()" 
        showLegend="true" 
        showLabels="true" 
        labelType="percent" 
        labelThreshold="0.5" 
        pieLabelsOutside="false" 
        donut="true" 
        donutRatio=".65" 
        donutLabelsOutside="true" 
        noData="No data available">
        <svg></svg>
    </nvd3-pie-chart>
</div>


<div>
    <nvd3-stacked-area-chart 
        data="exampleBarData" 
        id="dashBarGraph" 
        showXAxis="true" 
        showYAxis="true" 
        width="550" 
        height="350">
        <svg></svg>
    </nvd3-stacked-area-chart>
</div>

JS:

angular.module('iapApp')
.controller('DashchartCtrl',function($ scope,dashBoard){

JS:
angular.module('iapApp') .controller('DashchartCtrl', function($scope, dashBoard) {

    $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
    ];

    $scope.exampleBarData = [{
             "key": "Series 1",
             "values": [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] ]
         },
         {
             "key": "Series 2",
             "values": [ [ 1025409600000 , 0] , [ 1028088000000 , 0] , [ 1030766400000 , 0] , [ 1033358400000 , 0] , [ 1036040400000 , 0] , [ 1038632400000 , 0] , [ 1041310800000 , 0] , [ 1043989200000 , 0] , [ 1046408400000 , 0] , [ 1049086800000 , 0] , [ 1051675200000 , 0] , [ 1054353600000 , 0] , [ 1056945600000 , 0] , [ 1059624000000 , 0] , [ 1062302400000 , 0] , [ 1064894400000 , 0] , [ 1067576400000 , 0] , [ 1070168400000 , 0] , [ 1072846800000 , 0] , [ 1075525200000 , -0.049184266875945] ]
         },
         {
             "key": "Series 3",
             "values": [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] ]
         },
         {
             "key": "Series 4",
             "values": [ [ 1025409600000 , -7.0674410638835] , [ 1028088000000 , -14.663359292964] , [ 1030766400000 , -14.104393060540] , [ 1033358400000 , -23.114477037218] , [ 1036040400000 , -16.774256687841] , [ 1038632400000 , -11.902028464000] , [ 1041310800000 , -16.883038668422] , [ 1043989200000 , -19.104223676831] , [ 1046408400000 , -20.420523282736] , [ 1049086800000 , -19.660555051587] , [ 1051675200000 , -13.106911231646] , [ 1054353600000 , -8.2448460302143] , [ 1056945600000 , -7.0313058730976] ]
    }];        

    $scope.exampleData = [{
        key: "5 Stars",
        y: 25
    }, {
        key: "4 Stars",
        y: 32
    }, {
        key: "3 Stars",
        y: 99
    }, {
        key: "2 Stars",
        y: 120
    }, {
        key: "1 Starsx",
        y: 64
    }];

    $scope.xFunction = function() {
        return function(d) {
            return d.key;
        };
    };

    $scope.yFunction = function() {
        return function(d) {
            return d.y;
        };
    };


    var foo = function() {

        var data = [{
            "app_id": 6968,
            "app_nm": "OrgTree",
            "acrnm_nm": "",
            "app_lfcyc_nm": "Deployed",
            "valid_ind": "Y",
            "DomainAddress": "kevin.com",
            "LongID": " KEVIN P",
            "UserID": "",
            "dq_level": 3,
            "star1": "N",
            "star2": "Y",
            "star3": "N",
            "star4": "N",
            "star5": "N"
        }, {
            "app_id": 9066,
            "app_nm": "Application Profiler ",
            "acrnm_nm": "IAP ",
            "app_lfcyc_nm": "Deployed",
            "valid_ind": "Y",
            "DomainAddress": "kevin.com",
            "LongID": "KEVIN P",
            "UserID": "",
            "dq_level": 4,
            "star1": "Y",
            "star2": "N",
            "star3": "Y",
            "star4": "Y",
            "star5": "Y"
        }, {
            "app_id": 10741,
            "app_nm": "Federal Employee database ",
            "acrnm_nm": "IFED",
            "app_lfcyc_nm": "Deployed",
            "valid_ind": "Y",
            "DomainAddress": "rich.com",
            "LongID": ", RICHARD A (RICH)",
            "UserID": "",
            "dq_level": 3,
            "star1": "N",
            "star2": "N",
            "star3": "N",
            "star4": "N",
            "star5": "N"
        }, {
            "app_id": 10884,
            "app_nm": "Finance Tool",
            "acrnm_nm": "",
            "app_lfcyc_nm": "Being Assembled",
            "valid_ind": "Y",
            "DomainAddress": "rich.com",
            "LongID": "RICHARD A (RICH)",
            "UserID": "",
            "dq_level": 3,
            "star1": "U",
            "star2": "U",
            "star3": "U",
            "star4": "U",
            "star5": "U"
        }];

        var s1 = _.countBy(data, function(d) {
            return d.star1;
        });
        var s2 = _.countBy(data, function(d) {
            return d.star2;
        });
        var s3 = _.countBy(data, function(d) {
            return d.star3;
        });
        var s4 = _.countBy(data, function(d) {
            return d.star4;
        });
        var s5 = _.countBy(data, function(d) {
            return d.star5;
        });


        var tmp = {
            star1: s1,
            star2: s2,
            star3: s3,
            star4: s4,
            star5: s5
        }
        return tmp;
    };


推荐答案

问题实际上是使用不同长度的数据。系列2的数据元素少于其他系列。

The problem is actually with different lengths of data. Series 2 has fewer data elements than the other Series. If you either add data, or remove the series completely it will work.

查看。

这篇关于无法使用D3和Angularjs-nvd3-directives在一个页面上显示多个图形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-29 09:18