我正在使用morris.js库,我想自定义图表,以便正确格式化其图例中的日期时间。目前,当我将值2013-07-26T03:34:41+02:00
(ISO8601)传递给ykey
时,生成的图例内容如下:
我想生成图例的内容,以便以用户友好的方式显示2013-07-26T03:34:41+02:00
,可能是03:34:41 (2013-07-26)
或just now
/ 19 seconds ago
。
有可能吗?如果是这样,我该怎么做?
答案 0 :(得分:3)
如果有人来到这里寻找实际的传奇,而不是在数据点上格式化悬停细节,那么Morris团队就会制作一个小提示,展示如何使用一些JS和CSS。
来自here。
<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>
<style>
#legend {
height: 50px;
background: rgba(127, 127, 127, 0.5)
}
#legend span {
display: inline-block;
padding: 15px 30px;
position: relative;
}
#legend span:after {
padding-left: 4px;
content: '\00a0\00a0\00a0\00a0\00a0\00a0';
text-decoration: line-through;
}
</style>
<body>
<div id="area-example">
</div>
<div id="legend"></div>
</body>
然后在JS下面添加这个:
chart.options.labels.forEach(function(label, i){
var legendItem = $('<span></span>').text(label).css('color', chart.options.lineColors[i])
$('#legend').append(legendItem)
})
答案 1 :(得分:0)
使用以下功能并根据需要更换身体。
hoverCallback: function (index, options, content) {
var row = options.data[index];
//here row has x and y values
}
答案 2 :(得分:0)
如果它只针对你瞄准的x标签的日期格式,那么你应该使用dateFormat选项:
dateFormat: function (x) {
return moment(x).calendar();
}
它不会更改默认的hoverCallback,只会影响x标签在悬停气泡内的显示方式。
在我的例子中,我使用了moment.js lib来使日期看起来更好。