Javascript Morris 图表的类型错误

Question

我有一个带有 Bootstrap、Codeigniter 的网站，并尝试使用 Morris 图表显示有关注册的一些动态信息（如果您使用过 IPB 的管理界面，过去 7 天的新帐户注册是我的我要去）。

我有以下代码片段：

header.php

<!-- Morris Charts CSS -->
<link href="<?php echo base_url('assets/css/morris.css'); ?>" rel="stylesheet">

<!-- jQuery -->
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>

<!-- Morris Charts JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>

我的相关部分index.php

<div class="panel panel-default">
 <div class="panel-heading">
  <i class="fa fa-bar-chart-o fa-fw"></i> Account Registrations Past 7 days
 </div>
 <!-- /.panel-heading -->
 <div class="panel-body">
  <div id="acctregs" style="height: 300px;"></div>
 </div>
 <!-- /.panel-body -->
</div>
<script>
 var acctregs = new Morris.Line({
 // ID of the element in which to draw the chart.
 element: 'acctregs',
 // Chart data records -- each entry in this array corresponds to a point on
 // the chart.
 data:
 <?php echo json_encode($acct_regs); ?>,
 // The name of the data record attribute that contains x-values.
 xkey: 'date',
 // A list of names of data record attributes that contain y-values.
 ykeys: ['value'],
 // Labels for the ykeys -- will be displayed when you hover over the
 // chart.
 labels: ['Value']
 });
</script>

同样，回显结果 json_encode($acct_regs);:

{"2015-01-18":0,"2015-01-17":1,"2015-01-16":2,"2015-01-15":3,"2015-01-14":4,"2015-01-13":5}

我试过使用和不使用 'var acctregs = ' 片段，没有任何变化。我在我的浏览器控制台中收到一个错误："TypeError: this.data[0] is undefined morris.min.js:6" 到目前为止，我很困惑为什么它不起作用。我的 jquery 是 1.9.1.

欢迎就我可能遗漏的内容提供任何帮助。谢谢。

编辑 2015-01-19：我将包含 Morris.Line 信息的块从 index.php 移动到 footer.php 文件，在最后一个标签之前和之后都没有更改，它仍然给出相同的错误。再次感谢任何 thoughts/help.

Answer 1

所以，您的主要问题是您的数据格式不适合 morris。莫里斯想要一个点数组，即一个包含 x-y 坐标对的简单对象。例如，点 1,2 可能看起来像 {x:1, y:2}。因此，您的 data 对 date/value 对应该如下所示：

var acct_regs = [
    {date:"2015-01-18", y:0},
    {date:"2015-01-17", y:1},
    {date:"2015-01-16", y:2},
    {date:"2015-01-15", y:3},
    {date:"2015-01-14", y:4},
    {date:"2015-01-13", y:5}
    ];

除此之外，您的图表声明基本正确；你只需要告诉莫里斯它应该用于 xkey 和 ykey:

var acctregs = new Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'acctregs',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: acct_regs,
    // The name of the data record attribute that contains x-values.
    xkey: 'date', //could be anything, just has to match what is in data
    // A list of names of data record attributes that contain y-values.
    ykeys: ['y'], //could be anything, just has to match what is in data
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Value'],
    dateFormat: function (x) { //optional - specify a date format for the legend
        return new Date(x).toString().split("00:00:00")[0];
    }
});

图表如下所示：

你可以在这里看到它的实际效果：http://jsfiddle.net/phgqot3z/1/

对于莫里斯的大多数事情，基本的 api 文档很棒：http://morrisjs.github.io/morris.js/lines.html

除此之外，直接查看源代码也是一个很好的资源。

Javascript Morris 图表的类型错误

Javascript TypeError with Morris charts

javascript

php

jquery

codeigniter

morris.js