Question

我正在试图找出我的代码有什么问题。我已经阅读了很多次文档，但我不知道为什么这根本不起作用。在此代码中，我显示了过去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>

Answer 1

标签应该是一个列表。您可以拥有多个系列，因此您可以拥有多个标签。您需要将其定义为数组。

至于日子，这个值必须是一个日期，现在你只是设定一天。最简单的方法是使用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>

莫里斯线图不起作用

1 个答案: