我有一个问题需要几个月才能在morris.js图表中正确显示.
<script>
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
Morris.Line({
element: 'morris-line-chart',data: [
{ m: '01',a: 0,b: 270 },{ m: '02',a: 54,b: 256 },{ m: '03',a: 243,b: 334 },{ m: '04',a: 206,b: 282 },{ m: '05',a: 161,b: 58 },{ m: '06',a: 187,b: 0 },{ m: '07',a: 210,{ m: '08',a: 204,{ m: '09',a: 224,{ m: '10',a: 301,{ m: '11',a: 262,{ m: '12',a: 199,],xkey: 'm',ykeys: ['a','b'],labels: ['2014','2015'],xLabelFormat: function (x) { return months[x.getMonth()]; }
});
</script>
但图表上的所有月份显示为’Jan’……
解决方法
如果是
look at the documentation,则所需的xkey选项定义如下：
A string containing the name of the attribute that contains date (X)
values. Timestamps are accepted in the form of millisecond timestamps
(as returned by Date.getTime() or as strings in the following formats:
- 2012
- 2012 Q1
- 2012 W1
- 2012-02
- 2012-02-24
- 2012-02-24 15:00
- 2012-02-24 15:00:00
- 2012-02-24 15:00:00.000
目前,在您的数据中,您只提供代表月份的int(即01,02,03等)
因此,如果您将月份数据更改为有效的时间戳字符串,则根据文档,您应该有一个有效的方法将返回的“月份”值的索引映射到月份标签数组…
例：
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
Morris.Line({
element: 'morris-line-chart',data: [{
m: '2015-01',// <-- valid timestamp strings
a: 0,b: 270
},{
m: '2015-02',b: 256
},{
m: '2015-03',b: 334
},{
m: '2015-04',b: 282
},{
m: '2015-05',b: 58
},{
m: '2015-06',b: 0
},{
m: '2015-07',{
m: '2015-08',{
m: '2015-09',{
m: '2015-10',{
m: '2015-11',{
m: '2015-12',xLabelFormat: function(x) { // <--- x.getMonth() returns valid index
var month = months[x.getMonth()];
return month;
},dateFormat: function(x) {
var month = months[new Date(x).getMonth()];
return month;
},});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css" rel="stylesheet" /> <script src="http://cdn.oesmith.co.uk/morris-0.5.0.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <div id="morris-line-chart" style="height: 250px;"></div>
编辑
上面的例子可以通过包括morris版本0.5.1(而不是0.5.0 – 根据github page about this issue – 我没有在其他版本中测试过这一点)和稍微改变xLabelFormat选项(函数中的x)来调整条形图. ){…}显然是一个不同的对象,条形图与线条)：
条形图示例：
// months array and data are left the same
// only change is that the labelFormat option is removed
// and,x in xLabelFormat is a different object with Bar charts vs Line
// [inspect console to see the object]
var months = ["Jan","Dec"];
Morris.Bar({
element: 'morris-bar-chart',data: [{
m: '2015-01',b: 270
},{
m: '2015-02',b: 256
},{
m: '2015-03',b: 334
},{
m: '2015-04',b: 282
},{
m: '2015-05',b: 58
},{
m: '2015-06',b: 0
},{
m: '2015-07',{
m: '2015-08',{
m: '2015-09',{
m: '2015-10',{
m: '2015-11',{
m: '2015-12',xLabelFormat: function (x) { // <-- changed
console.log("this is the new object:" + x);
var month = months[x.x];
return month;
},});
<link href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <div id="morris-bar-chart" style="height: 250px;"></div>
