2

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

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

this does not graphs.js

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

in the corresponding 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>

I get 

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?

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

私にとっての解決策は、HTML の末尾にある script タグの変数に json 出力を入れることでした。

このような

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

そしてgraph.jsファイルでこの変数を呼び出します

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