javascript - 莫里斯折线图不起作用

标签 javascript html morris.js

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

相关文章:

javascript - 如何在 url 中添加参数以在脚本之间传递数据

javascript - 所有方法都返回 '.autoNumeric is not a function - Can' t 未格式化的数字

javascript - 莫里斯图缺失一半

javascript - morris.js 圆环图用数据更新颜色

javascript - Pinterest 扩展程序如何(临时)存储网页中的图像,然后在 iframe 中访问它们?

JavaScript 在输入时自动完成

javascript - 谷歌地图 Bootstrap 3

html - 元素在 IE 中无法正确显示

jquery - 外部+内联样式与仅外部样式

php - 如何将 MySQL 查询转换为 Morris 图表可读的 json