Question

我一直在为这个问题砸了几天。我试图在我的一个页面中使用Morris Chart来显示从SQL数据库收集的统计信息。但我无法让它发挥作用。这一切都归结为：

如果我在“数据”字段中手动输入数据，一切都很好。但是，如果我将数据放在变量中并引用“数据”字段中的变量，我得到：

无法读取undefined的属性'match'。

有什么区别？

这有效：

var chart = Morris.Line({
  element: 'line-example',
  data: [{Timestamp:'2015-05-20 10:00:00',Diastolic:110,Systolic:90,Pulse:65}],
  xkey: 'Timestamp',
  ykeys: ['Diastolic', 'Systolic', 'Pulse'],
  labels: ['Diastolic', 'Systolic', 'Pulse']
});

这不起作用：

var mydata = "[{Timestamp:'2015-05-20 10:00:00',Diastolic:110,Systolic:90,Pulse:65}]";

var chart = Morris.Line({
  element: 'line-example',
  data: mydata,
  xkey: 'Timestamp',
  ykeys: ['Diastolic', 'Systolic', 'Pulse'],
  labels: ['Diastolic', 'Systolic', 'Pulse']
});

Answer 1

第一个是数组。第二个，你将mydata定义为一个字符串。

尝试：

data: JSON.parse(mydata)

Answer 2

我遇到了类似的问题，这让我发疯，但幸运的是我找到了解决方案。

我传递了一组javascript对象作为数据持有者，并使用该函数将其转换为JSON字符串。它根本没有工作......但后来我尝试用JSON.parse解析字符串并且它运行顺利。显然，在解析JSON字符串时，Morris JS代码中存在一个错误。

如果您使用像我这样的对象数组，请尝试以下方法：

var area = new Morris.Area({
        element: 'revenue-chart',
        resize: true,
        data: JSON.parse(JSON.stringify(data)), //data is an array of objects
        xkey: 'date',
        ykeys: ['npubs_t', 'npubs_f'],
        labels: ['T', 'F'],
        lineColors: ['#a0d0e0', '#3c8dbc'],
        hideHover: 'auto'
      });

这种方式很有效。希望这可以帮助你或其他人。

Answer 3

我遇到了同样的问题。我的问题是我在angular（1.5）控制器中将数据变量声明为数组：

  data = [];

然后我从函数调用中获取值。这是有效的，除了morris.js中的折线图（Angular-morris是包装纸）。我将数据更改为

  data = '';

效果很好。

Morris.js数据（无法读取未定义的属性'匹配'）

3 个答案: