- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试通过创建 Angular JS 指令来使用 Morris JS 创建图形。我的指令代码是:
Reporting.directive('morrisLine', function(){
return {
restrict: 'EA',
template: '<div id="call-chart">test2</div>',
scope: {
data: '=', //list of data object to use for graph
xkey: '=',
ykey: '='
},
link: function(scope,element,attrs){
new Morris.Line({
element: element,
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
xkey: '{year}',
ykey: ['value'],
});
}
};
});
我在浏览器上检查控制台时收到的错误代码是:
TypeError: Cannot call method 'match' of undefined
at Object.t.parseDate (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:9523)
at n.eval (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3297)
at n.t.Grid.r.setData (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3888)
at n.r (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:1680)
at new n (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:11953)
at link (http://127.0.0.1:8000/static/js/app/directives/directives.js:94:20)
at j (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:43:157)
at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:463)
at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:480)
at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:480) <div morris-line="" class="ng-isolate-scope ng-scope" style="position: relative;">
错误代码指向的部分是说
element : element,
我是 Angular JS 和指令的新手,希望有人能为我指出正确的方向来处理这个问题。谢谢!
最佳答案
我就是这样处理莫里斯图的。示例是条形图:
sampleApp.directive('barchart', function() {
return {
// required to make it work as an element
restrict: 'E',
template: '<div></div>',
replace: true,
// observe and manipulate the DOM
link: function($scope, element, attrs) {
var data = $scope[attrs.data],
xkey = $scope[attrs.xkey],
ykeys= $scope[attrs.ykeys],
labels= $scope[attrs.labels];
Morris.Bar({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels
});
}
};
});
然后你可以将它与这个元素一起使用:
<barchart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></barchart>
其中 myModel 是要传入指令的数据数组,它应该具有与莫里斯图表兼容的正确格式。仔细查看该对象是如何在指令中的“链接”函数中传递的。
这是一个完整的工作示例:http://jsbin.com/ayUgOYuY/5/edit?html,js,output
关于javascript - 如何在 Angular JS 中为 Morris JS 图创建指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20322956/
是否可以动态更新莫里斯图?我知道setData()将更新数据,但我想更新设置。即,用户能够选择是否堆叠条形图。 我已经尝试过: bChart.stacked = true; bChart.setDat
这个 morrisjs javascript 有什么问题? http://jsbin.com/dituriheje/edit?html,js,output ) Morris.js L
我正在尝试创建类似Google Analytics(分析)“受众群体概览”图的图形。我正在尝试将X轴上从凌晨12:00 am到11:00 pm的小时数设置为 这是我目前正在使用的: Morris.Li
我已经阅读了文档及其要求,但我不想要它 :D 尝试将其设置为未定义并删除它,但随后 javascript 提示它丢失了。 有没有办法隐藏它? 最佳答案 您可以通过下一个选项禁用它: Morris.Li
我想知道是否可以在条形图上设置最大轴值(例如,我希望数据的最高点是 y 轴的顶端)?我看到折线图上有 ymin 和 ymax 选项,但我似乎找不到有关条形图的任何信息。 此外,如果有人知道如何将轴车道
我正在使用 Morris.js 条形图。出于某种原因,应该在 HOVER OVER 上出现的数字列在左下角。有没有人为什么? 最佳答案 没有任何代码很难给出好的答案。但是,它可能与您的 CSS 文件有
是否可以以相反的顺序(0-100)设置 y 轴值? 顶部的最大值必须从 0 到底部的 100。 Morris.Line({ element: 'line-example', dat
我正在尝试根据本地数据文件 - sales.php(json 格式)动态绘制莫里斯线: [ { year: '2008', value: 20 }, { year: '2009', value
我使用 morris.js绘制折线图图形,但我无法弄清楚如何仅更改折线图中的点颜色和样式。有谁知道如何只更改点样式? 谢谢。 最佳答案 使用 pointFillColors 属性。来自文档: poin
这是当我们使用Knuth-Morris-Pratt算法时,在Scheme中计算失效函数(我们要返回多少步)的代码: (define (compute-failure-function p) (
我有一个问题,因为我做了后端的动态响应。我生成的代码是: new Morris.Line({ // ID of the element in which to draw
我在使用 Morris.js 库创建图表时遇到一些麻烦。我创建了运动应用程序,每次训练都有一些值(value)。其中之一是“锻炼”,它表示锻炼类型(“运行”、“游泳”、“骑自行车”)。我想显示带有日期
为什么我会遇到异常 Uncaught Error: Graph container element not found 当使用morris.js时? 最佳答案 解决方案:将 javascript 放在
我在 yii2 中使用了 morris js 图表,当数据范围太高时出现问题,较低的数据范围会崩溃,有什么办法可以清楚地看到它?另外,要显示整周的数据,需要在 x 轴上向上滚动。 function c
我试图暗示 morris.js 但我收到以下错误: 我试着实现了一些教程,这真的很容易,但到目前为止我得到了以下内容 new Morris.Line({ element: 'myfirstchar
我正在使用 morris.js 和 javascript 创建折线图。这是我的代码: Morris.Area({ element: 'hero-area', data: [
我希望自定义堆叠条形图上的悬停图例,这样它就不会显示在特定条形图中没有值但会显示在其他条形图中的标签。希望下面链接中的图片有助于解决问题。图片中的行军标签只有几个标签的值,但显示了所有标签。我知道我必
我有以下 .js.coffee 文件 jQuery -> Morris.Line element: 'averages_chart' data: [{month: '2014 01 01',
是否可以使用 morris.js 添加水平条形图? http://jsbin.com/uzosiq/2/embed?javascript,live 非常感谢! 最佳答案 如果你使用来自 https:/
我很好奇 morris.js 是否支持在单个标签上放置多个堆叠条以及是否有人知道解决方法。 我想要将 2 个图表堆叠在同一行上。蓝色和红色应该相互重叠,绿色和黄色应该相互重叠。 Morris.Bar(
我是一名优秀的程序员,十分优秀!