使用angular-chart.js作为自定义mean.io包中的依赖项

Jua*_*dán 3 javascript charts angularjs

首先,我按照建议安装了angular-chart.js.

http://jtblin.github.io/angular-chart.js/

从我输入的自定义平均值包的目录中输入:

$ bower install angular-chart.js --save
Run Code Online (Sandbox Code Playgroud)

这在我的自定义模块的public/assets文件夹中创建了几个文件夹.

/packages/custom/report/public/assets/lib/angular-chart.js/...
and
/packages/custom/report/public/assets/lib/Chart.js/...
Run Code Online (Sandbox Code Playgroud)

我按照learn.mean.io中的说明操作,了解如何将角度依赖项添加到自定义平均值包中.

http://learn.mean.io/#mean-stack-packages-angular-modules-and-dependencies

在我的模块的app.js中:

// Aggregate CSS assets
Report.aggregateAsset('css', 'report.css');
Report.aggregateAsset('css', '../lib/angular-chart.js/dist/angular-chart.css');

// Aggregate JS assets
Report.aggregateAsset('js','../lib/Chart.js/Chart.js');
Report.aggregateAsset('js','../lib/angular-chart.js/dist/angular-chart.js');

// Add dependency to modules in the custom package
Report.angularDependencies(['chart.js']);
Run Code Online (Sandbox Code Playgroud)

理论上,这将等于定义我的模块,包括依赖:

angular.module('mean.report', ['chart.js']);
Run Code Online (Sandbox Code Playgroud)

其中我也试过了.

当我运行应用程序时,我可以看到下载了JS和CSS文件,可以使用CSS样式,但我看不到任何图表.

在mean.io文件中尝试了许多不同的配置方法我已经能够看到一个饼图,但是每当我尝试用真实数据提供它时,我会得到一些错误,比如图表没有定义等等.我改变了,这很疯狂我的应用程序视图中的一行和图表消失了.我不能让它以一致的方式运作.

因此,要么没有在我的模块中注入chart.js,要么没有解析angular-chart.js和Chart.js之间的依赖关系.

我与一个来自mean.io支持团队的人进行了长时间的讨论,他说一切都很好,我应该检查angular-chart.js

mik*_*ltz 8

听起来像Chart.js没有正确包含或无序.您是否尝试将脚本直接包含在视图中而不是通过aggregateAsset方法?

<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

我在这里很容易地运行了这个演示:http: //jsfiddle.net/uc25erpc/.如果你在Chart.js之前加载角度图表,我会得到你没有定义Chart的相同错误.

另请注意,请查看https://github.com/zingchart/ZingChart-AngularJS以获取替代的AngularJS包装器.