jquery - Rails 3.2.1 上的 morris.js 无法从 html 获取 json

Question

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

这有效在 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']
});
})

这不图表.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+)$/);

有人遇到过这种情况并找到解决方案吗？

Answer 1

将图形数据填充到数据日志中不起作用，因为它是字符串。您需要使用 JSON.parse 解析数据, jQuery.parseJSON或类似的。

还值得注意的是，您在示例中获得的数据并不是严格有效的 JSON，您需要对键进行转义，例如:

<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>

以及相应的HTML:

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