渲染在角度一D3餅圖與角nvd3

https://plnkr.co/edit/vE5Km2?p=preview 渲染在角度一D3餅圖與角nvd3

欲呈現角度的D3餅圖與angular-nvd3。我沒有錯誤，並且所有關聯的腳本都正在加載。

我不知道如何調用directive-- 提供的指令裏面的功能是：

<nvd3 options='options' data='data'></nvd3>

我改成：

<nvd3 options='vm.options' data='vm.data'></nvd3>

HTML：

<div ng-controller='MainController'> 
    <nvd3 options='vm.options' data='vm.data'></nvd3> 
    </div>

main.controller：

(function (angular) { 
    'use strict'; 
    angular 
     .module('blah').controller('MainController', MainController); 

    function MainController() { 
     var vm = this; 

     vm.initSampleData = initSampleData; // set up the var 

     function initSampleData() { 
      vm.options = { 
       'chart': { 
        'type': 'pieChart', 
        'height': 500, 
        'showLabels': true, 
        'duration': 500, 
        'labelThreshold': 0.01, 
        'labelSunbeamLayout': true, 
        'legend': { 
         'margin': { 
          'top': 5, 
          'right': 35, 
          'bottom': 5, 
          'left': 0 
         } 
        } 
       } 
      }; 

      vm.data = [ 
       {key: 'One', y: 5}, 
       {key: 'Two', y: 2}, 
       {key: 'Three', y: 9}, 
       {key: 'Four', y: 7}, 
       {key: 'Five', y: 4}, 
       {key: 'Six', y: 3}, 
       {key: 'Seven', y: .5} 
      ]; 
     } 
    } 

})(window.angular);

路線（不使用指令，準備用於角2.0），如果我添加 MainRoute $注入= [ '$ routeProvider'， 'nvd3'];它的錯誤...

function MainRoute($routeProvider){ 
     $routeProvider.when('/', { 
      controller: 'MainController as vm', 
      templateUrl : 'main.html', 
      bindToController: false 
     }); 
    }

來源

2016-08-25 cdb

我認爲你需要爲你的控制器做一個別名，它會解決你的問題。

<div ng-controller='MainController as vm'>

您分配data給控制器的對象，但鑑於之前，你會給你的控制器的別名也可以通過自己的名稱叫，所以你添加的別名是MainController.data之前，您添加它就像我提到的後在它之前 - vm.data。

希望它會幫助你

EDITED

這裏是Plunker與工作代碼。你的問題是：

你沒有初始化角模塊ng-app="yourModule"
您插入路由但沒有使用<ui-view>讓他們知道應該用

來源

2016-08-25 17:42:38 Mikki

@cdb，你能提供plunker ？這將是更容易玩弄它 – Mikki

https://plnkr.co/edit/vE5Km2?p=preview這是普拉克！ – cdb

@cdb，示例已損壞，請檢查控制檯。 – Mikki

渲染在角度一D3餅圖與角nvd3

回答

相關問題