我正在使用angular-nvD3目录进行圆环图。
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Donut Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
<script>var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'pieChart',
height: 450,
donut: true,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
pie: {
startAngle: function(d) { return d.startAngle -Math.PI/2 },
endAngle: function(d) { return d.endAngle -Math.PI/2 }
},
duration: 1,
}
};
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
}
];
});
</script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
</body>
</html>
但我不知道如何删除上面的径向按钮(一,二,三)。我不要求他们。 我的要求是click here。我需要甜甜圈,就像附上的截图一样。请帮我解决这个问题。
感谢。
答案 0 :(得分:0)
将 showLegend:false 添加到图表选项。
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Donut Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
<script>var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'pieChart',
height: 450,
donut: true,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
showLegend: false,
pie: {
startAngle: function(d) { return d.startAngle -Math.PI/2 },
endAngle: function(d) { return d.endAngle -Math.PI/2 }
},
duration: 1,
}
};
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
}
];
});
</script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
</body>
</html>
答案 1 :(得分:0)
只需在返回图表对象中添加行。
showLegend: false