Javascript TypeError с диаграммами Морриса

Question

У меня есть сайт с Bootstrap, Codeigniter и попытка использовать диаграммы Морриса для отображения некоторой динамической информации о регистрации (если вы использовали интерфейс администратора 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.

Любая помощь в отношении того, что я могу пропустить, приветствуется. Спасибо.

EDIT 2015-01-19: Я переместил блок, содержащий информацию Morris.Line из index.php в файл footer.php, как до последнего тега, так и после него без изменений, он по-прежнему дает такую ​​же ошибку , Еще раз спасибо за любые мысли/помощь.

Answer 1

Итак, ваша основная проблема заключается в том, что ваши данные не в правильном формате для morris. Моррис хочет массив точек, т. Е. Простой объект, содержащий координатную пару x-y. Например, точка 1,2 может выглядеть как {x:1, y:2}. Таким образом, ваш data пар дата/значение, должно выглядеть примерно так:

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/

Для большинства вещей Моррис, основной апи документ велик: http://morrisjs.github.io/morris.js/lines.html

Помимо этого, глядя на источник напрямую, также большой ресурс.