Wert anhängen Graph Achse im Rickshaw und was ticksTreatment und Reservat

Question

Dies ist meine erste Frage hier also bitte gehen Sie einfach :)

Ich versuche, einige Liniendiagramme mit Rikscha Graphen, d3 und jQuery UI zu implementieren. Ich habe einige vertikale Tabs und habe erfolgreich die Charts aus externen HTML-Dateien geladen.

Es gab ein wenig Dokumentation über Rickshaw, aber ich konnte nicht finden, was ich spezifisch danach war, also werde ich diese nette Gemeinschaft ein paar Fragen stellen, wenn das ok ist?

Erstens beim Laden von Tabs in jquery UI von externen HTML-Dateien wo soll ich alle Javascript und CSS in die Seite, die eingebettet ist (siehe unten historic.html) oder in die übergeordnete Seite? Ich habe beides versucht und sie scheinen zu arbeiten Ich wollte nur Best Practice wissen.

<ul> 
    <li><a href="#tabs-1"><div id="live-icon"></div>LIVE GRAPHS</a></li> 
    <li><a href="historic.html"><div id="historic-icon"></div>HISTORIC DATA</a></li> 

Zweitens ist die X-Achse in der Grafik in Millisekunden. Ich möchte "ms" an das Ende jedes der "Ticks" der x-Achse anhängen. also würde die x-Achse 50ms, 100ms, 150ms usw. lesen ... Kann das gemacht werden?

Und schließlich in Rickshaw haben sie dieses fächerförmige Beispiel (http://code.shutterstock.com/rickshaw/examples/extensions.html), die alle Schnickschnack hat. Es hat zwei Eigenschaften, auf denen ich keine Informationen finden kann. perserve: wahr? und ein anderes Beispiel hat tickFormat und tickTreatment? Könnte jemand bitte erklären, was diese tun.

var graph = new Rickshaw.Graph({ 
element: document.getElementById("chart"), 
width: 900, 
height: 500, 
renderer: 'area', 
stroke: true, 
preserve: true, 

Vielen Dank für Ihre Hilfe.

Answer 1

Wahrscheinlich nicht mehr relevant für die OP, aber da es noch offen ist, kann ich die Rikscha-Fragen beantworten:

Um ms bis zum Ende Ihrer Zecken hängen, müssen Sie die tickFormat Option verwenden. In their tutorial sie die Achse setzen sich wie folgt zusammen:

var y_axis = new Rickshaw.Graph.Axis.Y({ 
     graph: graph, 
     orientation: 'left', 
     tickFormat: Rickshaw.Fixtures.Number.formatKMBT, 
     element: document.getElementById('y_axis'), 
}); 

Hier sind Setzen sie die tickFormat bis zu sein, ein Standard sie gebaut haben, aber in Wirklichkeit kann es etwas dauern, das entspricht, was d3's axis' tickFormat dauert. tickFormat sollte eine Funktion sein, die eine Zahl akzeptiert und eine Zeichenfolge ausgibt. Sie wollen wahrscheinlich etwas entlang der Linien von

var y_axis = new Rickshaw.Graph.Axis.Y({ 
     graph: graph, 
     orientation: 'left', 
     tickFormat: function (d) { return d + ' ms'; }, 
     element: document.getElementById('y_axis'), 
}); 

die von ms gefolgt Dies wird die Zecken einfach machen sein Nummer.

Dies geschieht auch, um einen Teil der dreiteiligen Frage zu beantworten, die folgt. Die anderen beiden Teile betreffen tickTreatment und preserve. Die kurze Antwort lautet: tickTreatment wird als Klasse zu den Ticks hinzugefügt. Der Grund, dass dies nützlich ist, ist für das CSS-Styling, das Rickshaw ausnutzt. Sie haben einige Voreinstellungen, die Sie dafür verwenden können. Die in diesem Beispiel verwendete Datei heißt und fügt dem Text ein weißes Glühen hinzu, um es oberhalb des Diagramms lesbar zu machen.

preserve ist eine Option, die beeinflusst, ob die von Ihnen bereitgestellten Daten kopiert werden, bevor sie verwendet werden.Der entsprechende Abschnitt aus Rickshaw der Quelle ist hier:

var preserve = this.preserve; 
if (!preserve) { 
    this.series.forEach(function(series) { 
     if (series.scale) { 
      // data must be preserved when a scale is used 
      preserve = true; 
     } 
    }); 
} 

data = preserve ? Rickshaw.clone(data) : data; 

Grundsätzlich, wenn Sie preserve zu true (wird standardmäßig false) gesetzt, es wird zunächst eine Kopie der Daten machen.