2

我在 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']
});
})

这不是 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+)$/);

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

4

2 回答 2

5

在数据日志中填充图形数据不起作用，因为它是一个字符串。您需要使用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']
  });
})
于 2012-11-06T19:01:36.260 回答
2

对我来说，解决方案是将 json 输出放在 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 文件中调用此变量

$(document).ready(function() { 
  Morris.Line({
  element: 'annual',
    data: json_data,
    xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});
})
于 2012-11-03T16:42:03.993 回答