Question

我试图按照一个简单的例子来制作一个饼图，但它不会渲染图表。即使查看源代码，也不会出现图表代码（仅限原始指令代码）。正在我看到日志文件语句和范围内的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-inspector后我发现由于拼写错误而没有正确传递的选项。

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

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

BTW，我正在使用Angular 1.4.8。

Angular-nvD3饼图未显示

1 个答案: