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 
     } 
    ] 

}]);

来源

2015-10-15 Eddy

我也有类似的问题。在使用ng-inspector之后，我发现由于拼写错误，没有正确传入的选项）。

但我试过用“nvd3ChartDirectives”注册依赖关系，但收到一个异常，所以我只用了nvd3。也许这可能是一个可能的问题。

我建议用ng-inspector或Batarang做一些调试，并检查范围设置是否正确。

顺便说一句，我正在使用Angular 1.4.8。

来源

2015-12-31 11:56:12

Angular-nvD3饼图不显示

回答

相关问题