javascript - morris.js - 带有 json 文件的折线图

Question

这是我的资源:

• pageviews.json
• myfile.html

我的 pageviews.json 文件内容:

[
    {"day":1,"pageviews":"687928"},
    {"day":2,"pageviews":"688331"},
    {"day":3,"pageviews":"603741"},
    {"day":4,"pageviews":"542002"},
    {"day":5,"pageviews":"657730"},
    {"day":6,"pageviews":"804183"},
    {"day":7,"pageviews":"776029"},
    {"day":8,"pageviews":"654589"}
]

我正在尝试使用以下内容渲染 morris.js 折线图:

$(document).ready(function() {
  $.getJSON("pageviews.json", function (json) {
    var jason_data = JSON.stringify(json);
    var jasonstuff = (jason_data.replace(/\"/g, "")); 

    Morris.Line({
      element: 'mydiv',
      data: jason_data,
      xkey: 'day',
      ykeys: ['pageviews'],
      labels: ['PageViews']
    });
  });
});

var jasonstuff 输出不含引号的 JSON。

[{day:1,pageviews:687928},{day:2,pageviews:688331},{day:3,pageviews:603741},{day:4,pageviews:542002},{day:5,pageviews:657730},{day:6,pageviews:804183},{day:7,pageviews:776029},{day:8,pageviews:654589}]

我得到的错误:

Uncaught TypeError: Cannot read property 'match' of undefined

这似乎在 xkey 和 ykeys 值上崩溃了。我知道我一定错过了一些非常愚蠢的东西。有人有建议吗？

Answer 1

您不应该将从 .getJSON() 返回的数据字符串化。您也不应该尝试替换引号。您误解了 JSON 字符串和 native Javascript 对象之间的区别。

Morris 需要一个 Javascript 对象(或对象数组)。从技术上讲，您的 pageviews.json 是一个大字符串。 .getJSON() 的作用是获取该文件并将其从字符串转换为 native 对象。

var myString = '{"day":1,"pageviews":"687928"}';
var myObject = {day: 1, pageviews: "687928"};

通过对从 .getJSON() 返回的数据进行字符串化，您实际上是将 native 对象再次转换回字符串，这是 Morris 无法理解的。引号也不是问题，只是它们必须出现在字符串中才能被视为有效的 JSON 格式。只需将 .getJSON() 返回的 JSON 对象直接输入 Morris 即可。

$.getJSON("pageviews.json", function (json) {
  Morris.Line({
    element: 'mydiv',
    data: json,
    xkey: 'day',
    ykeys: ['pageviews'],
    labels: ['PageViews']
  });
});

注意:您的 pageviews: "687928" 属性将该数字作为字符串存储在 pageviews.json 文件中。您可能希望在将其读入应用程序之前在文件中对其进行转换，否则您将需要解析该值(除非 Morris 为您执行此操作)。