Диаграмма линии Морриса не работает

Я пытаюсь выяснить, что не так с моим кодом. Я читал документацию много раз, но я не знаю, почему это просто не работает. В этом коде я показываю статистику за последние 7 дней. Даже на этикетке просто отображается «V» вместо «Value». Что происходит?!Диаграмма линии Морриса не работает

var ledata = { 
 
\t "element":"bar-example", 
 
\t "data":[ 
 
\t \t {"day":"31","count":0}, 
 
\t \t {"day":"01","count":0}, 
 
\t \t {"day":"02","count":0}, 
 
\t \t {"day":"03","count":0}, 
 
\t \t {"day":"04","count":0}, 
 
\t \t {"day":"05","count":0} 
 
\t ], 
 
\t "xkey":"day", 
 
\t "ykeys":["count"], 
 
\t "labels":"Value" 
 
}; 
 
new Morris.Line(ledata);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
 
    <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> 
 
<meta charset=utf-8 /> 
 
<title>Morris.js Bar Chart Example</title> 
 
</head> 
 
<body> 
 
    <div id="bar-example"></div> 
 
</body> 
 
</html>

источник

2016-02-06 Zerquix18

Этикетки должен быть список. У вас может быть более одной серии, поэтому у вас может быть несколько ярлыков. Вы должны определить его как массив.

Что касается дней, это значение должно быть датой, теперь вы просто устанавливаете день. Самый простой способ - использовать объект Date. См. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date. Morris.js может работать с миллисекундным форматом, возвращаемым объектом Date.

Как только дата установлена правильно, вы всегда можете изменить способ ее отображения на диаграмме, используя xLabelFormat или интервалы с использованием xLabels.

var date = new Date(); 
 

 
var ledata = { 
 
    "element": "bar-example", 
 
    "data": [{ 
 
    "day": date.valueOf(), 
 
    "count": 0 
 
    }, { 
 
    "day": date.setDate(date.getDate() - 1), 
 
    "count": 0 
 
    }, { 
 
    "day": date.setDate(date.getDate() - 1), 
 
    "count": 0 
 
    }, { 
 
    "day": date.setDate(date.getDate() - 1), 
 
    "count": 0 
 
    }, { 
 
    "day": date.setDate(date.getDate() - 1), 
 
    "count": 0 
 
    }, ], 
 
    "xkey": "day", 
 
    "xLabelFormat": function(x) { 
 
    return x.toLocaleDateString(); 
 
    }, 
 
    "ykeys": ["count"], 
 
    "labels": ["Value"], 
 
    "xLabels": "days" 
 
}; 
 
new Morris.Line(ledata);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
 
    <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> 
 
    <meta charset=utf-8 /> 
 
    <title>Morris.js Bar Chart Example</title> 
 
</head> 
 

 
<body> 
 
    <div id="bar-example"></div> 
 
</body> 
 

 
</html>

источник

2016-02-06 17:35:52

Диаграмма линии Морриса не работает

ответ

Смежные вопросы