rails 3.2.1上的morris.js无法从html获取json [英] morris.js on rails 3.2.1 cannot get json from html

问题描述

我在morris.js图形库上有一个奇怪的错误

I have a strange error on the morris.js graphing library

这在graphs.js中起作用

this works in graphs.js

$(document).ready(function() { 
  Morris.Line({
  element: 'annual',
    data: [
    {y: '2012', a: 100},
    {y: '2011', a: 75},
    {y: '2010', a: 50},
    {y: '2009', a: 75},
    {y: '2008', a: 50},
    {y: '2007', a: 75},
    {y: '2006', a: 100}
  ],
    xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});
})

这不是
graphs.js

this does not graphs.js

$(document).ready(function() { 
  Morris.Line({
  element: 'annual',
    data: $('#logs_chart').data('logs'),
    xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});
})

在相应的html中

<div data-logs="[
    {y: '2012', a: 100},
    {y: '2011', a: 75},
    {y: '2010', a: 50},
    {y: '2009', a: 75},
    {y: '2008', a: 50},
    {y: '2007', a: 75},
    {y: '2006', a: 100}
  ]" id="logs_chart"></div>

我得到

Uncaught TypeError: Cannot call method 'match' of undefined  morris.js:316

Morris.parseDate = function(date) {
    var isecs, m, msecs, n, o, offsetmins, p, q, r, ret, secs;
    if (typeof date === 'number') {
      return date;
    }
    m = date.match(/^(\d+) Q(\d)$/);
Uncaught TypeError: Cannot call method 'match' of undefined
    n = date.match(/^(\d+)-(\d+)$/);

是否有人遇到此问题并找到解决方案？

Has someone encountered this and found a solution?

推荐答案

对我来说，解决方法是将json输出放在HTML末尾的脚本标记中的变量中。

For me the solution was to put the json output in a variable in a script tag at the end of the HTML.

喜欢这个

<script> 

 var json_data = [
    {y: '2012', a: 100},
    {y: '2011', a: 75},
    {y: '2010', a: 50},
    {y: '2009', a: 75},
    {y: '2008', a: 50},
    {y: '2007', a: 75},
    {y: '2006', a: 100}
  ]

</script>

并在graphs.js文件中调用此变量

and call this variable in the graphs.js file

$(document).ready(function() { 
  Morris.Line({
  element: 'annual',
    data: json_data,
    xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});
})

这篇关于rails 3.2.1上的morris.js无法从html获取json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！