Question

我正在尝试使用angular.morris-chart.js在我的角度应用程序中绘制一些圆环图。但是当我无法弄清楚如何添加它时。
我在我的libs目录中添加了js文件，在angular调用后将其添加到我的index.html中。我也在我的应用程序中注入了它但它仍然无效。我在浏览器控制台中收到此错误：'ReferenceError：Morris未定义'。
有什么线索可以解决我的问题吗？

Answer 1

您可以尝试使用ng-morris：

https://github.com/cleechtech/ng-morris

Answer 2

Include in your project-'raphael/raphael.js','morris.js/morris.js', 'angular-morris-chart/src/angular-morris-chart.js','morris.js/morris.css'

这些文件将在bower安装angular-morris-chart之后出现在bower_components中。

Answer 3

您应该转到Angular-Morris。我完全在Angular 1.3和1.5中使用过它。

这很容易使用。

添加以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-morris/1.3.0/angular-morris.min.js"></script>

将依赖项注入模块：

'angular.morris'

然后在模板中使用它：

<div
bar-chart 
bar-data='[
    { y: "2006", a: 100, b: 90 },
    { y: "2007", a: 75,  b: 65 },
    { y: "2008", a: 50,  b: 40 },
    { y: "2009", a: 75,  b: 65 },
    { y: "2010", a: 50,  b: 40 },
    { y: "2011", a: 75,  b: 65 },
    { y: "2012", a: 100, b: 90 }
]'
bar-x='y'
bar-y='["a", "b"]'
bar-labels='["Series A", "Series B"]'
bar-colors='["#31C0BE", "#c7254e"]'>
</div>

一旦显示，就开始从控制器传递值。

bar-data =<controller>.arrayname（如果需要，则字符串化）

将angular.morris图表添加到角度应用程序

3 个答案: