我正在尝试找出我的代码出了什么问题。我已经阅读了很多次文档,但我不知道为什么这根本不起作用。在此代码中,我显示了过去 7 天的统计数据。甚至标签也只显示“V”而不是“Value”。这是怎么回事?!
var ledata = {
"element":"bar-example",
"data":[
{"day":"31","count":0},
{"day":"01","count":0},
{"day":"02","count":0},
{"day":"03","count":0},
{"day":"04","count":0},
{"day":"05","count":0}
],
"xkey":"day",
"ykeys":["count"],
"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>
最佳答案
标签应该是一个列表。您可以拥有多个系列,因此您也可以拥有多个标签。您需要将其定义为数组。
对于天数,这个值需要是一个日期,现在您只需设置天数。最简单的方法是使用 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>
关于javascript - 莫里斯折线图不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35243477/