带有 Angular.js 和 D3 的图表答案

【问题标题】：chart with Angular.js and D3带有 Angular.js 和 D3 的图表
【发布时间】：2014-12-26 17:42:23
【问题描述】：

我正在尝试使用 angular.js 制作图表，但图表没有出现在页面中，当运行没有 rout.js 的 html 页面时代码可以工作，但是当用户 rout.js 显示空白页面时这是我的代码。

 var myapp = angular.module('myapp', ['angularCharts']);
   function D3Controller($scope) {

console.log("Entering Scope");

$scope.config = {
    title: 'Products',
    tooltips: true,
    labels: false,
    mouseover: function () {
    },
    mouseout: function () {
    },
    click: function () {
    },
    legend: {
        display: true,
        //could be 'left, right'
        position: 'right'
    }
}
 console.log("And here we are in $scope." + $scope.config.title );
;

$scope.data = {
    series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
    data: [{
            x: "Laptops",
            y: [100, 500, 0],
            tooltip: "this is tooltip"
        }, {
            x: "Desktops",
            y: [300, 100, 100]
        }, {
            x: "Mobiles",
            y: [351]
        }, {
            x: "Tablets",
            y: [54, 0, 879]
        }]


}
 console.log("And here we are in $scope.data.sereis" + $scope.data.series );
;

}

rout.js

  'use strict';

  myappApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
        $routeProvider
            .when('/d3', {
                templateUrl: 'views/d3/d3.html',
                controller: 'D3Controller',

                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })
    });

html页面

  <div ng-controller="D3Controller"  >
    <div id="d3-chart" style="width: 100%; height: 500px; padding: 0px; position: relative;">
                <div 
                    data-ac-chart="'bar'" 
                    data-ac-data="data" 
                    data-ac-config="config" 
                    class="chart">
                </div>
                <input ng-model="config.title" style="width: 100%;"/>
                <br>
                <input ng-model="data.series" style="width: 100%;"/>
                <br>
                <input ng-model="data.data" style="width: 100%;"/>
            </div>
      </div>

谁能帮帮我？

【问题讨论】：

查看控制台日志（在 firefox Ctrl+shift+k 中，在 Chrome ctrl+shift+J -> 控制台中）。你在 route.js 中打错了myappApp.config应该是myapp.config。您将在控制台中看到一个错误，将其添加到您的问题中。顺便说一句，“使用严格”是为了什么？

标签： javascript angularjs d3.js

【解决方案1】：

您尚未在代码中的任何位置注册 D3Controller，但在声明路由时将其作为字符串引用。

若要解决此问题，如果D3Controller 与myApp.config 在同一范围内，请使用函数D3Controller 的裸名称而不是字符串"D3Controller"。

否则，将控制器注册到您的应用：

myApp.controller('D3Controller', D3Controller);

【讨论】：