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

这是我的资源：


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

我得到的错误：


  未捕获的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为您完成此操作）。

关于javascript - morris.js-带有json文件的折线图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43729528/