X轴上的图表线morris.js格式日期 [英] Chart line morris.js format date in X axis
本文介绍了X轴上的图表线morris.js格式日期的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用morris.js
折线图以显示不同的系列值.
I'm using morris.js
line chart in order to display different series values.
我想格式化我的X轴,所以我可以不用3年的一周的一天来放置X轴了.
I would like to format my X axis so instead of the year I can place a 3 chacarter day of week.
示例:
- 2016-05-10应该是THU-05-10
这是我的实际代码:
Morris.Line({
element: 'linechart',
data: data,
lineColors: ['#819C79', '#fc8710', '#FF6541', '#A4ADD3', '#766B56'],
xkey: 'period',
ykeys: ['park1','park2','park3','park4','park5'],
labels: ['PARK 1', ''PARK 2', ''PARK 3', ''PARK 4', ''PARK 5'],
xLabels: 'day',
xLabelAngle: 45,
resize: true
});
有任何线索吗?
推荐答案
添加xLabelFormat
将日期转换为所需的格式.请尝试以下代码段中的xLabelFormat
函数:
Add xLabelFormat
to convert the date to the desired format. Try the xLabelFormat
function in the following code snippet:
Morris.Line({
element: 'chart',
data: [
{ period: '2016-05-10', park1: 200, park2: 200, park3: 50, park4: 10, park5: 0 },
{ period: '2016-05-11', park1: 15, park2: 275, park3: 5, park4: 60, park5: 0 },
{ period: '2016-05-12', park1: 80, park2: 20, park3: 30, park4: 30, park5: 0 },
{ period: '2016-05-13', park1: 100, park2: 200, park3: 250, park4: 50, park5: 0 },
{ period: '2016-05-14', park1: 50, park2: 60, park3: 20, park4: 10, park5: 0 },
{ period: '2016-05-15', park1: 75, park2: 65, park3: 10, park4: 60, park5: 0 },
{ period: '2016-05-16', park1: 175, park2:95, park3: 110, park4: 30, park5: 0 },
{ period: '2016-05-17', park1: 150, park2:95, park3: 90, park4: 111, park5: 0 },
{ period: '2016-05-18', park1: 120, park2:95, park3: 60, park4: 47, park5: 0 },
{ period: '2016-05-19', park1: 60, park2:95, park3: 50, park4: 231, park5: 0 },
{ period: '2016-05-20', park1: 10, park2:95, park3: 100, park4: 80, park5: 0 }
],
lineColors: ['#819C79', '#fc8710', '#FF6541', '#A4ADD3', '#766B56'],
xkey: 'period',
ykeys: ['park1','park2','park3','park4','park5'],
labels: ['PARK 1', 'PARK 2', 'PARK 3', 'PARK 4', 'PARK 5'],
xLabels: 'day',
xLabelAngle: 45,
xLabelFormat: function (d) {
var weekdays = new Array(7);
weekdays[0] = "SUN";
weekdays[1] = "MON";
weekdays[2] = "TUE";
weekdays[3] = "WED";
weekdays[4] = "THU";
weekdays[5] = "FRI";
weekdays[6] = "SAT";
return weekdays[d.getDay()] + '-' +
("0" + (d.getMonth() + 1)).slice(-2) + '-' +
("0" + (d.getDate())).slice(-2);
},
resize: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="chart"></div>
这篇关于X轴上的图表线morris.js格式日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文