So passen Sie die Legende von einem Morris-graph?

Ich bin mit dem morris.js Bibliothek und das würde ich gerne anpassen, meine Graphen so richtig zu formatieren das Datum und die Uhrzeit vorhanden ist, in Ihrer Legende. In dieser Zeit, wenn ich Werte übergeben als-wie 2013-07-26T03:34:41+02:00 (nach ISO8601), um die ykey dann die generierte Legende Inhalt ist der folgende:

So passen Sie die Legende von einem Morris-graph?

Möchte ich zum generieren der Inhalt der Legende zur Anzeige der 2013-07-26T03:34:41+02:00 in einer benutzerfreundlichen Weise, vielleicht so etwas wie 03:34:41 (2013-07-26) oder just now /19 seconds ago.

Ist es möglich? Wenn ja, wie kann ich das machen?

InformationsquelleAutor user502052 | 2013-07-26
  1. 0

    Verwenden Sie die folgende Funktion, und ändern Sie den Körper nach Ihrem Bedarf.

       hoverCallback: function (index, options, content) {
   var row = options.data[index];
   //here row has x and y values
   }
    InformationsquelleAutor user2178385
  2. 3

    Wenn jemand kam hierher auf der Suche nach einer tatsächlichen Legende und nicht als Formatierung der hover-details auf einen Datenpunkt, einen der Morris-team, das aus einer Geige, die zeigen, wie es zu tun mit etwas JS und CSS.

    Vom hier.

    <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>

    dann fügen Sie diese unterhalb Ihrer JS:

    chart.options.labels.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label).css('color', chart.options.lineColors[i])
    $('#legend').append(legendItem)
})
    InformationsquelleAutor SteveCav
  3. 0

    Wenn es nur für das Datumsformat der x-label, die Sie anstreben, dann sollten Sie die dateFormat-option :

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

    Es nicht ändern, der Standard-hoverCallback und nur Einfluss auf die Art der x-label angezeigt werden, im inneren des hover-bubble.

    In meinem Beispiel habe ich die moment.js lib, um das Datum besser Aussehen.

    InformationsquelleAutor eternel7
Schreibe einen Kommentar