![](/img/trans.png)
[英]How to control width of chart using angular-chart and chart.js?
[英]how to use chart.js with angular-chart using requirejs
尝试使用requirejs实现延迟加载。 当我不使用图表时,一切都很好。 但是,当我想使用图表(角度图表)时,不会成功! 将chart.js与angular-chart一起使用 。
这是main.js:
require.config({
baseUrl: "http://localhost/ums/angular/js",
paths: {
'angular': 'lib/angular.min',
'ngRoute': 'lib/angular-route.min',
'flash': 'lib/angular-flash',
'angular-loading-bar': 'lib/loading-bar.min',
'ngAnimate': 'lib/angular-animate.min',
'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',
'uniqueField': 'admin/directives/angular-unique',
'input_match': 'admin/directives/angular-input-match',
'uniqueEdit': 'admin/directives/angular-unique-edit',
'angularAMD': 'lib/angularAMD.min',
'chart.js': 'lib/Chart.min',
'angular-chart':'lib/angular-chart.min',
'app': 'admin/app',
},
waitSeconds: 0,
shim: {
'angular': { exports: 'angular'},
'angularAMD': { deps: ['angular']},
'angular-chart': { deps: ['angular','chart.js']},
'ngRoute':{ deps: ['angular']},
'angular-loading-bar':{ deps:['angular'] },
'ngAnimate': { deps:['angular'] } ,
'ui.bootstrap': {deps: ['angular'] },
'uniqueField': {deps: ['angular'] },
'input_match': {deps: ['angular'] },
'uniqueEdit': {deps: ['angular'] },
'flash': {deps: ['angular'] },
},
deps: ['app']
});
这是app.js:
var base_url="http://localhost/ums/";
define(['angularAMD', 'ngRoute','flash','angular-loading-bar','ngAnimate','uniqueField','input_match','angular-chart'], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','flash','angular-loading-bar','ngAnimate','uniqueField','input_match','angular-chart']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/dashboard', angularAMD.route({
title : 'Dashboard',
controller : 'dashboardCtrl',
templateUrl : base_url+'angular/partials/admin/dashboard.php',
controllerUrl: base_url+'angular/js/admin/controllers/dashboardCtrl.js'
}))
//.......................all routing ............//
.otherwise({
redirectTo : '/dashboard'
});
}]);
app.run(['$rootScope', '$route', function($rootScope, $route) {
$rootScope.$on('$routeChangeSuccess', function() {
document.title = $route.current.title;
});
}]);
// Bootstrap Angular when DOM is ready
return angularAMD.bootstrap(app);
});
如何实现它们之间的依赖关系? 有什么建议么? 有什么例子吗?
从文档-http://requirejs.org/docs/api.html
如果模块ID具有以下特征之一,则该ID将不会通过“ baseUrl +路径”配置传递,而只会被视为相对于文档的常规URL:
•以“ .js”结尾。
•以“ /”开头。
•包含URL协议,例如“ http:”或“ https:”。
这将启动您的chart.js模块,RequireJS将尝试从包含运行RequireJS的HTML页面的目录中加载chart.js
注意-您应该可以在开发人员工具>网络标签中看到此内容。 请注意,对chart.js的请求不会转到您期望的路径。
这似乎是一个错误(带有角度图)-看到typeahead.js的类似问题-https: //github.com/twitter/typeahead.js/issues/1211
有几种方法可以解决/解决此问题
修改angular-chart代码以使期望的模块ID为不chartjs
。 然后将上述配置中的chart.js更改为chartjs。 这是正确的方法。
将您的chart.min.js文件重命名为chart.js,并将其与运行RequireJS的html文件放在同一文件夹中。 充其量只是一个非常非常临时的解决方案。
将nodeIDCompat设置为true-这将使模块ID something.js等同于something 。 然后将配置中的模块ID更改为chart
。 所以像
require.config({ nodeIdCompat: true, paths: { 'chart': base_url + '/lib/Chart.min', ...
如果您正在使用r.js进行压缩/合并,则可能需要先进行测试,然后再解决此变通办法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.