角-nvD3派图不显示

Question

我试图遵循一个简单的例子来制作一个饼形图，但它不会呈现图表。即使查看源代码，也不会出现图表代码(只有原始指令代码)。控制器正在加载，因为我在作用域中看到了log file语句和title属性。我没有收到任何错误的控制台和有点困惑的时候。

提前感谢

我使用的是在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>

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

}]);

Answer 1

我也有过类似的问题。在使用ng-检查器之后，我发现那些由于错误而不能正确传入的选项)。

不过，我确实尝试过向"nvd3ChartDirectives“注册依赖项，但是收到了一个异常，所以我只使用了nvd3。也许这可能是个可能的问题。

我建议使用吴-督察或巴达朗进行一些调试，并检查是否正确设置了范围。

顺便说一下，我用的是角1.4.8。