莫里斯折线图不起作用答案

【问题标题】：Morris Line Chart not working莫里斯折线图不起作用
【发布时间】：2016-02-07 01:35:52
【问题描述】：

我正试图找出我的代码有什么问题。我已经阅读了很多次文档，但我不知道为什么这根本不起作用。在这段代码中，我显示了过去 7 天的统计数据。甚至标签也只显示“V”而不是“价值”。怎么回事？！

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>

【问题讨论】：

标签： javascript html morris.js

【解决方案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>

【讨论】：