1
我使用NVD3和使用Angularjs-nvd3-指令角指令在一个页面上。我在创建图表时没有任何问题，但只要我尝试在唯一的饼图上显示两个图表就会显示。 http://cmaurer.github.io/angularjs-nvd3-directives/stacked.area.chart.html无法获得多个图形来显示使用D3和Angularjs-nvd3-指令
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'，函数（$范围，仪表盘）{
$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;
};
这可能是完全关闭，但我看到你有两个兄弟SVG视口，''，但你需要通用于其他SVG：''。否则，它只会显示第一个''中的图形。 – FernOfTheAndes
根据文档，'id'属性应该可以避免这种情况，所以它看起来像Angularjs-nvd3-directives中的一个bug。 –