莫里斯折线图不起作用

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

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

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

莫里斯折线图不起作用

Morris Line Chart not working

html

javascript

morris.js