Angular-nvD3饼图不显示
问题描述:
我想要遵循一个简单的示例来制作饼图,但它不会显示图表。即使查看源代码,也不会出现图表代码(只有原始的指令代码)。控制器正在加载,因为我会在范围内看到日志文件语句和标题属性。我没有得到任何错误的控制台,并有点困惑。Angular-nvD3饼图不显示
在此先感谢
我使用的是最新版本的库,添加在index.html文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-nvd3-directives/0.0.7/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css"/>
Chart.html
<div >
<div ng-controller="chartsController" >
<div>
{{title}}
</div>
<nvd3ChartDirectives options="options" data="data" id="chartId" config="config" class="with-3d-shadow with-transitions">
</nvd3ChartDirectives>
</div>
</div>
指数。 js
var app = angular.module('seApp', ['ngRoute', 'ngResource', 'ngMessages', 'ngAnimate', 'ui.bootstrap', 'smart-table', 'nvd3ChartDirectives']);
(注入为nvd3不起作用)。
chart.js之
app.controller('chartsController', ['$scope', '$log', function($scope, $log) {
$scope.title = 'Chart Title';
$log.info ("Create Chart");
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
width: 600,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
transitionDuration: 500,
labelThreshold: 0.01,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
}
$scope.config = {
visible: true, // default: true
extended: false, // default: false
disabled: false, // default: false
autorefresh: true, // default: true
refreshDataOnly: false, // default: false
deepWatchOptions: true, // default: true
deepWatchData: false, // default: false
deepWatchConfig: true, // default: true
debounce: 10 // default: 10
};
$scope.xFunction = function(){
return function(d){
return d.key;
};
};
$scope.yFunction = function(){
return function(d){
return d.y;
};
};
$scope.data = [
{
key: "435fdfg",
y: 16
},
{
key: "fgfsgsg",
y: 12
},
{
key: "lodfrr",
y: 3
},
{
key: "yuiiyui",
y: 7
},
{
key: "adffd",
y: 4
}
]
}]);
答
我也有类似的问题。在使用ng-inspector之后,我发现由于拼写错误,没有正确传入的选项)。
但我试过用“nvd3ChartDirectives”注册依赖关系,但收到一个异常,所以我只用了nvd3。也许这可能是一个可能的问题。
我建议用ng-inspector或Batarang做一些调试,并检查范围设置是否正确。
顺便说一句,我正在使用Angular 1.4.8。