Aggiungi valore a Rickshaw Graph Axis e ciò che è ticksTreatment e Riserva

Question

Questa è la mia prima domanda qui quindi per favore vai facile :)

Sto cercando di attuare alcune grafici lineari con grafici risciò, D3 e jQuery UI. Ho alcune schede verticali e sono riuscito a caricare i grafici da file html esterni.

C'era un po 'di documentazione su Rickshaw ma non sono riuscito a trovare quello che stavo specificatamente dopo quindi chiederò a questa gentile comunità alcune domande se è ok?

In primo luogo quando si caricano le schede nell'interfaccia utente jquery da file html esterni dove dovrei inserire tutto il javascript e il css nella pagina che è incorporata (vedi sotto historic.html) o nella pagina padre? Ho provato entrambi e sembrano funzionare volevo solo conoscere le migliori pratiche.

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

In secondo luogo, I l'asse x sul grafico è in millisecondi. Vorrei aggiungere "ms" alla fine di ogni "tick" dell'asse x. quindi l'asse x leggerà 50ms, 100ms, 150ms ecc ... Può essere fatto?

E infine in Rickshaw hanno quell'esempio con ventaglio (http://code.shutterstock.com/rickshaw/examples/extensions.html) che ha tutte le campane e fischietti. Ha due proprietà su cui non riesco a trovare alcuna informazione. perseverare: vero? e un altro esempio ha tickFormat e tickTreatment? Qualcuno potrebbe spiegare per favore cosa fanno.

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

Grazie mille per il vostro aiuto.

Answer 1

Probabilmente non è più rilevante per il PO, ma dal momento che è ancora senza risposta, posso rispondere alle domande di risciò:

Per aggiungere ms fino alla fine dei tuoi zecche, è necessario utilizzare l'opzione tickFormat. In their tutorial, hanno creato l'asse come segue:

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

Qui, stanno allestendo il tickFormat di essere un default hanno costruito in, ma in realtà, si può fare tutto ciò che è conforme a quello d3's axis' tickFormat prende. tickFormat dovrebbe essere una funzione che accetta un numero e genera una stringa. Probabilmente vuoi qualcosa sulla falsariga di

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

Questo renderà i tick semplici il numero seguito da ms.

Ciò accade anche per rispondere a una parte della domanda in tre parti che segue. Le altre due parti riguardano tickTreatment e preserve.

La risposta breve è che tickTreatment viene aggiunto come classe ai tick. La ragione per cui questo è utile è per lo stile CSS, di cui Rickshaw si avvale. Hanno alcuni preset che puoi usare per questo. Quello che stanno usando in questo esempio è chiamato glow, che aggiunge un bagliore bianco attorno al testo per renderlo leggibile sulla parte superiore del grafico.

preserve è un'opzione che influisce sul fatto che i dati forniti vengano copiati prima che vengano utilizzati.La sezione pertinente dalla sorgente di Rickshaw è qui:

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; 

In sostanza, se si imposta preserve a true (il valore predefinito è false), farà una copia dei dati di prima.