[英]chart with Angular.js and D3
I'm try to make chart with angular.js but the chart don't apears in page the code works when run html page with out rout.js but when user rout.js It display blank page This is my code. 我尝试使用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 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 page 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>
Can any one help me please? 有人可以帮我吗?
You haven't registered your D3Controller
anywhere in your code but are referring to it as a string while declaring the route. 您尚未在代码中的任何地方注册
D3Controller
,但在声明路由时将其引用为字符串。
To fix the problem, if D3Controller
is in the same scope as the myApp.config
use the bare name of the function D3Controller
instead of the string "D3Controller"
. 要解决此问题,如果
D3Controller
与D3Controller
处于同一范围内, myApp.config
使用函数D3Controller
的裸名代替字符串"D3Controller"
。
Otherwise, register the controller with your app: 否则,请向您的应用程序注册控制器:
myApp.controller('D3Controller', D3Controller);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.