0

我正在使用morris.js库，我想自定义我的图表，以便正确格式化其图例中存在的日期时间。此时，当我将值 as-like 2013-07-26T03:34:41+02:00(ISO8601) 传递给时ykey，生成的图例内容如下：

莫里斯传奇

我想生成图例的内容，以便以2013-07-26T03:34:41+02:00用户友好的方式显示，可能类似于03:34:41 (2013-07-26)or just now/ 19 seconds ago。

可能吗？如果是这样，我该怎么做？

4

3 回答 3

3

如果有人来这里是为了寻找一个实际的图例而不是在数据点上格式化悬停细节，莫里斯团队的一个人做了一个小提琴，展示了如何使用一些 JS 和 CSS 来做到这一点。

从这里。

<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)
})
于 2016-05-26T23:52:53.353 回答
0

使用以下功能并根据您的需要改变身体。

   hoverCallback: function (index, options, content) {
   var row = options.data[index];
   //here row has x and y values
   }
于 2013-08-23T21:02:05.240 回答
0

如果它只是针对您所瞄准的 x 标签的日期格式，那么您应该使用 dateFormat 选项：

dateFormat: function (x) {
   return moment(x).calendar();
}

它不会更改默认的 hoverCallback，只会影响 x 标签在悬停气泡内的显示方式。

在我的示例中，我使用了 moment.js 库来使日期看起来更好。

于 2015-02-08T12:46:37.113 回答