Dołącz do Rickshaw Value Graph osi i co jest ticksTreatment and Preserve

Question

To jest moje pierwsze pytanie na tutaj tak przejdź łatwe :)

Próbuję zaimplementować niektóre wykresy liniowe z rikszą wykresów, D3 i jQuery UI. Mam kilka pionowych kart i udało mi się uzyskać wykresy do załadowania z zewnętrznych plików html.

Trochę dokumentacji na temat Rikszy, ale nie mogłem znaleźć tego, o co mnie szczególnie prosiłem, więc poproszę tę wspólnotową społeczność o kilka pytań, czy to jest w porządku?

Po pierwsze przy ładowaniu kart w jquery UI z zewnętrznych plików html, gdzie powinienem umieścić wszystkie javascript i css na stronie, która jest osadzona (zobacz poniżej historic.html) lub na stronie nadrzędnej? Próbowałem obu i wydaje się, że działają. Chciałem tylko poznać najlepszą praktykę.

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

Po drugie, oś X na wykresie jest w milisekundach. Chciałbym dodać "ms" na końcu każdego "tyknięcia" osi X. więc oś X odczytałaby 50ms, 100ms, 150ms etc ... Czy to można zrobić?

I na koniec w Rickshaw mają ten wymyślony przez fanów przykład (http://code.shutterstock.com/rickshaw/examples/extensions.html), który ma wszystkie dzwonki i gwizdy. Ma dwie właściwości, na których nie mogę znaleźć żadnej informacji. perserve: prawda? a inny przykład ma tickFormat i tickTreatment? Czy ktoś mógłby wyjaśnić, co one robią.

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

Dziękuję bardzo za pomoc.

Answer 1

Prawdopodobnie nie ma już znaczenia dla PO, ale ponieważ jest to nadal bez odpowiedzi, mogę odpowiedzieć na pytania Rickshaw:

dołączyć ms do końca swoich kleszczy, trzeba użyć opcji tickFormat. W their tutorial, założyli oś następująco:

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

Tutaj oni konfigurowania tickFormat być domyślnym oni wbudowane, ale w rzeczywistości, to może wziąć coś zgodnego z co d3's axis' tickFormat trwa. tickFormat powinna być funkcją, która akceptuje liczbę i wypisuje łańcuch. Prawdopodobnie chcesz coś podobnego do linii:

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

Spowoduje to, że tyknięcia będą prostymi cyframi za znakami ms.

To samo dotyczy odpowiedzi na część pytania trój częściowego. Pozostałe dwie części dotyczą tickTreatment i preserve.

Krótka odpowiedź brzmi, że tickTreatment zostaje dodany jako klasa do ticków. Powodem, dla którego jest to przydatne, jest styl CSS, z którego korzysta Rickshaw. Mają pewne ustawienia wstępne, których możesz użyć do tego. Ten, którego używają w tym przykładzie, nazywa się glow, co dodaje biały poświatę wokół tekstu, aby umożliwić jego odczytanie na górze wykresu.

preserve to opcja wpływająca na to, czy dane, które podajesz, zostaną skopiowane przed użyciem.Odpowiednia sekcja od źródła Riksza jest tutaj:

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; 

Zasadniczo, jeśli ustawisz preserve do true (domyślnie go do false), będzie to zrobić kopię danych w pierwszej kolejności.