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

以下是我的资源：

pageviews.json myfile.html My pageviews.json文件内容：

我正在尝试使用以下内容呈现morris.js折线图：

var jasonstaff输出不带引号的JSON

我得到的错误是：

未捕获的TypeError:无法读取未定义的属性“match”

---

这似乎在xkey和ykeys值处出现了问题。我知道我一定错过了一些非常愚蠢的事情。有人有什么建议吗？

您不应该对从.getJSON返回的数据进行字符串化。你也不应该试图替换引号。您误解了JSON字符串和本机Javascript对象之间的区别

Morris需要一个Javascript对象或一组对象。从技术上讲，您的pageviews.json是一个大字符串。getJSON所做的是获取该文件并将其从字符串转换为本机对象

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

通过对从.getJSON返回的数据进行字符串化，实际上您正在将本机对象再次转换为字符串，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为您这样做。

此处数据是一个对象数组，包含x和y属性，如xkey和ykeys选项所述。检查这个

var数据=[ {日期：1，浏览量：687928}， {日期：2，浏览量：688331}， {日期：3，浏览量：603741}， {日期：4，浏览量：542002}， {日期：5，浏览量：657730}， {日期：6，浏览量：804183}， {日期：7，浏览量：776029}， {日期：8，浏览量：654589} ] 莫里斯线{ 元素：“mydiv”， 数据：数据， xkey:['day']， ykeys:['pageviews']， 标签：['PageViews']， 解析时间：false };

---

根据你的json，我生成图表 请找到下面的链接并检查

我尝试了下面的代码，效果很好

 var jason_data = [{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.Line({
  element: 'line-example',
  data: jason_data,
  xkey: 'day',
  ykeys: ['pageviews'],
  labels: ['PageViews']
});

---

仅供参考，json不是某人的名字Jason，它代表JavaScript对象表示法。你的变量名让我笑了；

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

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

 var jason_data = [{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.Line({
  element: 'line-example',
  data: jason_data,
  xkey: 'day',
  ykeys: ['pageviews'],
  labels: ['PageViews']
});