无法使用D3和Angularjs-nvd3-directives在一个页面上显示多个图形 [英] Can't get multiple graphs to display on one page using D3 and Angularjs-nvd3-directives
本文介绍了无法使用D3和Angularjs-nvd3-directives在一个页面上显示多个图形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用NVD3和angular指令使用Angularjs-nvd3指令。我没有创建图形的问题，但是一旦我尝试显示两个图形，只有饼图将显示。 http://cmaurer.github.io/angularjs-nvd3-directives /stacked.area.chart.html
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.
查看 this plnkr 。
这篇关于无法使用D3和Angularjs-nvd3-directives在一个页面上显示多个图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
