So stellen Sie den Datumswert für die x-Achse mit gRaphael ein Liniendiagramm

Ich habe kürzlich damit begonnen, gRaphael für meine Grafikanforderungen zu verwenden und bin bisher ziemlich beeindruckt. Bei der Erstellung von Liniendiagrammen habe ich jedoch einige Schwierigkeiten bekommen, insbesondere wenn ich versuche, die Werte für die X-Achse auf Daten zu setzen, kann der Graph nicht gerendert werden. Mein Code um die Grafik zu erzeugen ist:So stellen Sie den Datumswert für die x-Achse mit gRaphael ein Liniendiagramm

<script type='text/javascript' charset='utf-8'> 


      var r = Raphael('holder'); 


      var lines = r.g.linechart(20, 20, 600, 300, [[1, 2, 3, 4, 5, 6, 7]], [['4.16','6.35','1.77','3.1','9.79','10.03','-0.3']], {nostroke: false, axis: '0 0 1 1', symbol: 'o', smooth: false}).hoverColumn(function() { 
       this.tags = r.set(); 
       for (var i = 0, ii = this.y.length; i < ii; i++) { 
        this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{fill: '#fff'}, {fill: this.symbols[i].attr('fill')}])); 
       } 
      }, function() { 
       this.tags && this.tags.remove(); 
      }); 
      lines.symbols.attr({r: 3}); 



    </script> 
    <div id='holder'></div>

Wie würde ich in der Lage sein, '1, 2, 3, 4, 5, 6, 7' die X-Achsen-Werte zu ersetzen sagen: ‚Januar 2001, Februar 2001 , März 2001 ... etc ... etc .... '?

Vielen Dank in der Tat, alle helfen sehr geschätzt!

Quelle

2010-07-28 SW4

Zuerst müssen Sie dem Diagramm einige Werte geben, über die es sich nicht beschweren wird. In Ihrem Fall könnten Sie die UNIX speichern Zeitstempel usw. Dann können Sie die Werte mit so etwas wie dies ändern (mit Prototypen etc.):

lines.axis[0].text.items.each(function (index, label) { 
     //Get the timestamp you saved 
     originalText = label.attr('text'); 
     newText = 'CONVERT TIMESTAMP TO DATE USING originalText as input HERE'; 
     //label.rotate(75); 
     label.attr({'text': newText}); 
    });

Die .each kann durch eine regelmäßige

for(var x = 0; x < lines.axis[0].text.length; x++)

ersetzt werden

Schleife, wenn Sie möchten.

Quelle

2010-08-11 07:30:54 Morten

Vielen Dank in der Tat :) – SW4

Diese Antwort ist falsch! Die Argumente sollten (Index, Label) wie in der folgenden Antwort sein. Das verursachte eine Stunde Verwirrung, bevor ich endlich den Unterschied sah. – chiliNUT

Hallo. Ich bin wirklich neu in diesem Bereich. Ich frage mich nur, wo wir diesen Code genau einfügen sollten ... ich meine, ich habe den folgenden Code var lines = r.linechart (30, 30, 600, 440, [[01/01/2014/02/01/2014, 03/01/2014,04/01/2014,05/01/2014]], [[100,150,130,85,100]], {axisstep: 20, nostroke: false, Achse: "0 0 1 1", Symbol: "circle ", glatt: wahr}). hoverColumn (function() { this.tags = r.set(); für (var i = 0, ii = dies.y.length; i

$.each(lines.axis[0].text.items , function (index, label) { 
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], 
     date = new Date(parseInt(label.attr("text"))), 
     day = date.getDate(), 
     month = months[date.getMonth()];; 

    dateText = month + " " + day; 
    //label.rotate(75); 
    label.attr({'text': dateText}); 
});

Quelle

2013-04-14 13:30:24 AbdullahDiaa

So stellen Sie den Datumswert für die x-Achse mit gRaphael ein Liniendiagramm

Antwort

Verwandte Themen