javascript 如何在 morris.js 图表中正确显示月份？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30129930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get months to show correctly in a morris.js chart?
提问by Hyman
I am having an issue getting months to show correctly in a morris.js chart.
我遇到了在 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, b: 0 },
{ m: '08', a: 204, b: 0 },
{ m: '09', a: 224, b: 0 },
{ m: '10', a: 301, b: 0 },
{ m: '11', a: 262, b: 0 },
{ m: '12', a: 199, b: 0 },
],
xkey: 'm',
ykeys: ['a', 'b'],
labels: ['2014', '2015'],
xLabelFormat: function (x) { return months[x.getMonth()]; }
});
</script>
but all months on the chart show as 'Jan' ...
但图表上的所有月份都显示为“Jan”...
回答by wahwahwah
If you look at the documentation, the requiredxkeyoption is defined like this:
如果您查看文档，则所需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
包含日期 (X) 值的属性名称的字符串。时间戳以毫秒时间戳的形式接受（由 Date.getTime() 返回或作为以下格式的字符串：
- 2012年
- 2012年第一季度
- 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
Currently, in your data, you are only supplying an int representing the month (ie 01, 02, 03, etc.)
目前，在您的数据中，您只提供一个代表月份的 int（即 01、02、03 等）
So if you change your month data to be a valid timestamp string, according to the documents, you should then have a valid method for mapping the index of the returned "month" value to your monthslabel array...
因此，如果您将月份数据更改为有效的时间戳字符串，根据文档，您应该有一个有效的方法将返回的“月份”值的索引映射到您的months标签数组...
Example:
例子：
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',
a: 54,
b: 256
}, {
m: '2015-03',
a: 243,
b: 334
}, {
m: '2015-04',
a: 206,
b: 282
}, {
m: '2015-05',
a: 161,
b: 58
}, {
m: '2015-06',
a: 187,
b: 0
}, {
m: '2015-07',
a: 210,
b: 0
}, {
m: '2015-08',
a: 204,
b: 0
}, {
m: '2015-09',
a: 224,
b: 0
}, {
m: '2015-10',
a: 301,
b: 0
}, {
m: '2015-11',
a: 262,
b: 0
}, {
m: '2015-12',
a: 199,
b: 0
}, ],
xkey: 'm',
ykeys: ['a', 'b'],
labels: ['2014', '2015'],
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>Edit
编辑
The above example can be adjusted for bar charts by including morris version 0.5.1 (instead of 0.5.0 - according to the github page about this issue- I have not tested this in other versions) and slightly changing the xLabelFormatoption (the xin function(x){...}apparently is a different object with bar charts vs line):
上面的例子可以通过包括莫里斯0.5.1进行调整条形图（ -根据，而不是0.5.0有关此问题的GitHub的网页-我还没有在其它版本测试了这个），并稍微改变了xLabelFormat选项（x在function(x){...}明显是带有条形图和线条的不同对象）：
Bar Chart Example:
条形图示例：
// 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", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
Morris.Bar({
element: 'morris-bar-chart',
data: [{
m: '2015-01',
a: 0,
b: 270
}, {
m: '2015-02',
a: 54,
b: 256
}, {
m: '2015-03',
a: 243,
b: 334
}, {
m: '2015-04',
a: 206,
b: 282
}, {
m: '2015-05',
a: 161,
b: 58
}, {
m: '2015-06',
a: 187,
b: 0
}, {
m: '2015-07',
a: 210,
b: 0
}, {
m: '2015-08',
a: 204,
b: 0
}, {
m: '2015-09',
a: 224,
b: 0
}, {
m: '2015-10',
a: 301,
b: 0
}, {
m: '2015-11',
a: 262,
b: 0
}, {
m: '2015-12',
a: 199,
b: 0
}, ],
xkey: 'm',
ykeys: ['a', 'b'],
labels: ['2014', '2015'],
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>