AI m przy użyciu biblioteki wykresów Highstock dla projektu finansowego kopalni Ale jestem coraz osadzony w kwestiach wydajności Moja praca wdrożenie Highstock ma i 5 wykresów na wykresie ii wiele linii i typów linii w etykiecie wykres iii stosowane do punktów na wykresie iv nowe dane przybywające około raz na sekundę, dodając punkt i animowanie wykresu w lewo Jednak jest kilka kluczowych problemów, z jakimi pracuję w tej konfiguracji. Renderowanie jest bardzo powolne Jest to problem z wydajnością z powodu kwoty i liczba razy generowanych wykresów. Nie można wyregulować regulacji zakresu czasowego na dole Wydajność związana z kontrolą zamrażania. Mam możliwość dodania punktu, animowanie wykresu w lewo Jednak nie mogę dodać flagi z tym nowym punktem danych Zobacz SO problem. I nie widzę prostego rozwiązania tych problemów Highstock To jest doskonała biblioteka Ale ja patrzyłem na Google Wykres API, aby sprawdzić, czy może spełnić te punkty. Performance Google Charts API przekracza Highstock biorąc pod uwagę wszystkie interakcje Poniżej kilka wykresów na jednej stronie. Wielu zakładek w 1 widoku. Główne linia, zakres obszaru, histogram, linie progowe zobacz czerwone zielone linie. line szereg czasu. Łatwiej dodać flagę punktową jednocześnie do mojego wykresu linii serii czasu. Czy ktoś przeszedł przez coś podobnego Czy istnieją inne sposoby na poprawę wydajności highstock Czy Google Charts może zrobić lepszą pracę here. Ps Moje zaproszenie highcharts wygląda następująco: Clojurescript z mojego doświadczenia wynika, że biblioteka wykresów Google działa lepiej niż Highcharts, jednak bez większej liczby znaczników lub kopii danych konfiguracyjnych trudno byłoby wyodrębnić określone problemy, które mogłyby przyczynić się do spowolnienia wydajności. Zalecana karta graficzna NVD3 z wyszukiwarką widoku. Jeśli jest to wykres akcji lub po jakimś wykresie, najprawdopodobniej najpotężniejsza biblioteka wykresów na zewnątrz jest d3.To jest biblioteka towarzysząca, która wykorzystuje d3 nazywaną nvd3, która udostępnia zestawy wykresy wielokrotnego użytku, warto spojrzeć na ich wykres liniowy z wyszukiwarką wyświetleń To nie będzie dokładnie naśladować to, co obecnie masz na miejscu, ale z mojego doświadczenia nie tylko wydajność jest lepsza, ale jeśli znasz trochę JS d3, jest nieskończenie łatwiejsze do dostosowania pod maską i nie tylko kosmetycznie - plus jest o wiele więcej ludzi z tamtych doświadczeń i chętnych do pomocy. odpowiedzi 11 kwietnia 14 w 13 48. Używamy węzła do raportowania, ale nie jako część naszego głównego systemu generowania sygnału generowania. Aby szczerze mówiąc, odpowiedź na pewno będzie tak dla każdej wspólnej technologii programistycznej, ponieważ potrzeba tylko jednej osoby, aby ją użyć, aby odpowiedzieć tak. Wystarczy spojrzeć na OCaml, zanim ulica Jane, najbardziej techno najmilsza na ulicy, nigdy o tym nie słyszała a teraz jest bardzo dobrze znana. Prawdopodobnie kanoniczna odpowiedź na tego typu pytanie powinna być taka. META RANT Ogólnie rzecz biorąc, te pytania stwarzają trochę problemów z tą witryną z dwóch powodów. Dla każdego języka programowania lub stosu, jeśli za sk jest ktoś używający tego do handlu odpowiedź jest prawdopodobnie prawdopodobnie tak. Nie ma rzeczywistego wyniku lub wezwanie do działania z pytania Jeśli ktoś odpowie tak, więc co jeśli ktoś nie odpowiedział, więc co to jest kanoniczna odpowiedź na takie pytanie to. Od umieścić w inny sposób, co odpowiedź czyni plakat szczęśliwy tutaj. Jest 11 czerwca 14 w 14 52. Następujący post jest częścią dokumentu D3 Tips and Tricks, które można pobrać Aby skorzystać z tego wpisu w kontekście, rozważyć to z innymi w blogu lub po prostu pobrać pdf i lub przykłady ze strony downloads. Toolsty mają cudowną dualność Są z jednej strony dość darned użyteczne rzeczy, które pomagają w podając kontekst i informacje w razie potrzeby, az drugiej strony , jeśli jest to zrobione z największą starannością, mogą wyglądać bardzo stylowo. Teoretycznie stanowią one niewielki krok od tego, z czym graliśmy teraz na łagodniej bardziej złożonej arenie przejść i wydarzeń Można wziąć to na dwa sposoby Albo zaakceptuj to pracuje i wdraża je tak, jak pokazano, albo dowiesz się, co się dzieje i czuję się swobodnie wyśmiewać moje wysiłki, jak ci amatorscy rangi. Źródło dla wdrożenia zostało zaczerpnięte z przykładu Mike Bostocka tutaj To zostało połączone z kilkoma innymi bitami s i kawałki najtrudniejsze jest opracowanie, jak poprawnie sformatować wyświetlaną datę i wstawić linię w etykietce, którą znalazłem tutaj dobrze zrobione wszystkim uczestniczącym w tej dyskusji zakładam, że wszystkie lub niektóre błędy występujące podczas implementacji będzie moje, podczas gdy jakiekolwiek sukcesy będą sprowadzone do pierwotnych twórców. Na, w przypadku pewnego stopnia nieporozumień, etykieta jednej lub dwóch słów to dyskretna informacja, która stanie się widoczna, gdy mysz jest unoszona gdzieś konkretnie większość z nas widzieli i używali, ale przypuszczam, że wszyscy nazywają je różnymi rzeczami, takimi jak infotip, podpowiedź lub hover box Nie wiem, czy ma im odpowiednie imię, ale oto przykład my próbujesz osiągnąć. Możesz zauważyć, że mysz unosiła się nad jednym z okrągłych wykresów i pojawiła się wskazówka, która dostarcza użytkownikowi dokładną datę i wartość tego punktu. Teraz możesz zauważyć, że istnieje pewien stopień fantazyjny tutaj, ponieważ informacje są związane prostokątnym kształcie odrobinę zaokrąglone naroża i lekki nieprzejrzysty Inny kawałek fantazyjny, którego nie widzisz w formacie pdf jest to, że gdy te wskazówki pojawiają się i znikają, czynią to w eleganckim blaknięciu , fade-out sposób Purty. Now, zanim zaczniemy opisywać jak kod idzie razem, niech brać szybkie spojrzenie na dwie techniki specyfiki, o których wspomniałem wcześniej, przejścia i zdarzenia. Z głównych przejść strony internetowej są opisane jako stopniowo interpolowanie stylów i atrybutów w czasie Więc co mam na myśli to, że jeśli chcesz zmienić obiekt, możesz to zrobić po prostu określając punkt końcowy stylu atrybutu, który ma się zakończyć, i czas, który chcesz zabrać i odejść. Oczywiście, i Nie jest to takie proste, ale na szczęście, mądrzejsze osoby niż zrobiłem fantastyczną pracę opisującą różne aspekty przejścia, więc zapoznaj się z poniższymi wskazówkami na temat bardziej szczegółowego opisu tematu. Chętnie obserwując przejścia myszy i przeciągów myszy w przykładach narzędziowych, Twój apetyt na więcej. Inna technika jest związana z zdarzeniami myszy Opisuje to przeglądarka, która obserwuje, kiedy coś się dzieje za pomocą myszy na ekranie, a kiedy to się zdarza, zajmuje określone działanie Prawdopodobnie niekompletna lista typów wydarzeń following. mousedown Wyzwalane przez element po naciśnięciu przycisku myszy nad nim. mouseup Wyzwalane przez element po zwolnieniu przycisku myszy nad nim. mouseover Wyzwalane przez element, gdy myszka nad nim. mouseout Wyzwalane przez element, gdy mysz wychodzi z it. mousemove Wyzwalane przez element na każdym ruchu myszy nad nim. click Wyzwalane przez kliknięcie myszą myszy, a następnie myszy nad elementem. c ontextmenu Wyzwalany przez kliknięcie prawym przyciskiem myszy na element. dblclick Wyzwalany przez dwa kliknięcia w ciągu krótkiego czasu nad elementem. Jak wiele z nich jest ważnych do wykorzystania w d3 nie jestem pewien, ale jestem gotów postawić, że istnieją prawdopodobnie więcej niż te tutaj również Proszę przejść do znacznie lepszego opisu danego tematu, jeśli jest to wymagane. Zaprowadź potrząsanie. Na, wzmocnione kilkoma nowymi koncepcjami do rozważenia, zobaczmy, jak są one wprowadzone w życie. Jeśli zaczniemy nasz prosty wykres rozproszenia wykresu są cztery obszary, które chcemy zmodyfikować może być łatwiejsze do sprawdzenia plików w przykładowych plikach w sekcji pobierania. Pierwszym obszarem jest CSS Następujący kod powinien być dodany tuż przed styl znaczników. Te style definiują sposób wyświetlania etykietek Większość z nich jest dość prosta Pozycja etykiety jest wykonana w wartościach bezwzględnych, a nie względnych Tekst wyśrodkowany, wysokość, szerokość i kolor prostokąta wynosi 28px , 60 pikseli i światła przeciwmgielne pectively Wypełnienie jest ciekawą cechą, która zapewnia schludny sposób na wzrost kształtu o ustaloną kwotę z określonego rozmiaru. Ustawiamy granicę na 0px, tak aby nie pojawiło się i elegancki atrybut stylu o nazwie promień graniczny zapewnia miły zaokrąglone narożniki na prostokącie. Następnie, ale w żadnym wypadku nic nie wskazuje na żaden wskaźnik, aby poinstruować zdarzenie myszy przechodząc przez element i kierować na to, co znajduje się pod tym elementem. Przeczytaj więcej tutaj Oznacza to, że nawet jeśli etykietka częściowo zasłania okrąg, kod będzie działał tak, jakby mysz znajdowała się tylko w kole. Drugie dodanie jest prostym elementem, który powinien być umieszczony pod deklaracją zmiennej parseData. Ta linijka formatuje datę, kiedy pojawia się w naszym etykietce Bez tego, czas byłby domyślnie niepokojąco długą kombinacją doczesnych szczegółów W tym przypadku zadeklarowaliśmy, że chcemy zobaczyć dzień miesiąca e i pełny miesiąc nazwę B. Trzeci blok kodu i s deklaracja funkcji dla div. Możemy umieścić, że tuż po definicji valueline w JavaScript Ponownie nie ma tu zbyt wiele, że jest zaskakujące Powiedzmy, że dołączyć div do elementu body, ustawiamy klasę na klasę tooltip z CSS i ustawimy przezroczystość na zero Może to brzmieć dziwnie, że opacity ustalona jest na zero, ale pamiętaj, że jest to naturalny stan etykiety podpowiedzi To będzie żyć niewidzialna, dopóki nie nadejdzie chwila objawienia i pojawi się. Ostatni blok kodu jest nieco bardziej skomplikowane i można je opisać jako zmutowaną wersję delikatnego trochę kodu, który użyliśmy do rysowania punktów dla wykresu rozproszonego To dlatego, że podpowiedzi są tematami rozproszonych kręgów Bez kręgu na myszy, etykieta nigdy się nie pojawi. Oto kod, który zawiera wykres rysunku rozproszonego, który zawiera całość, ponieważ jest całkiem integralna. Przed rozpoczęciem przechodzenia przez kod, przykładowy plik etykietek zawierających krótkie serie komentarze dla wierszy, które są dodawane lub zmieniane z wykresu rozproszonego, więc jeśli chcesz porównać to, co dzieje się w kontekście, to jest opcja. Pierwsze sześć wierszy kodu to powtórzenie skryptu rysunku wydruku rozproszonego. są to, że zwiększyliśmy promień okręgu z 3 5 do 5, aby ułatwić myszkę nad obiektem i usunęliśmy średnik z linii atrybutu cy, ponieważ kod musi teraz nosić. na obszarach, które odpowiadają dwupoziomowemu kursorowi myszy i myszom myszy Gdy mysz przesuwa się przez dowolny z kręgów na wykresie rozproszonym, kod myszy zostanie wykonany na elemencie div Kiedy mysz zostanie przesunięta poza okrąg, wykonywany jest inny zestaw instrukcji . Byłoby błędem pomyśleć o etykietkach narzędzi w liczbie mnogiej, ponieważ nie ma całej serii pojedynczych etykietek narzędzi, które czekają tylko na ich konkretne koło. Jest tylko jedna etykieta, która pojawia się, gdy mysz przesuwa się przez okrąg. W zależności od w okrąg kapelusza to s, właściwości etykietki zmienią się nieznacznie pod kątem jego położenia i zawartości. Na linii myszy przejmuje wprowadzenie etykiety podpunktowej Następnie oświadczamy, że element zostanie wprowadzony div i że będziemy stosować przejście do jego przejścia do wprowadzenia Następujące dwie linie opisują przejście Będzie to trwać 200 milisekund 200 i spowoduje zmianę elementów krycia na nieprzezroczystość 9 kolorów 9 Zważywszy, że naturalny stan naszego etykietki jest nieprzejrzystością 0, ma to sens dla coś, co się pojawia, ale nie przebija się do stałego obiektu i zachowuje niewielką przezroczystość, aby wyglądało to mniej trwale. Następujące trzy wiersze formatują nasz poradnik Pierwszy dodaje element html zawierający informacje o xiy data i wartość Teraz to jest zrobione w nieco dziwny sposób Inne etykiety narzędzi, które widziałem, użyły elementu zamiast jednego z nich, ale w tym przypadku używałem, ponieważ chciałem dołączyć złamanie wiersza br, aby oddzielić datę i wartość Jestem pewien, że istnieją inne sposoby na to, ale to dla mnie zrobiło Inną ciekawą częścią tej linii jest to, że nazywa się to naszą funkcją formatowania czasu, którą opisaliśmy wcześniej Następna dwie linie umieszczają etykietkę na ekranie i robią to, chwycają współrzędne xi y myszy, gdy zdarzenie ma miejsce w przypadku fragmentów i urywków oraz zastosuj korektę w przypadku współrzędnej y, aby podnieść etykietkę o tym samym kwota jak jej wysokość 28 pixels. The na sekcji mouseout jest nieco prostszy w tym, że nie ma zrobić żadnych fantazyjnych tekst html współrzędnych stuff Wszystko co musisz zrobić, to zniknąć element div i to odbywa się po prostu odwracając opacity back do 0 i ustawienie czasu trwania przejścia na 500 milisekund jest nieco dłuższy niż zanikanie sprawia, że wygląda nieco chłodniej IMHO. Right, tam idziesz Jako opis s skończył się kawałek ściany tekstu boję się Ale miejmy nadzieję między e xplanation i przykładowy kod otrzymasz pomysł Proszę poświęcić trochę czasu, aby poznać ustawienia opisane tutaj, aby znaleźć te, które pracują dla Ciebie iw procesie wzmocnisz niektóre z zasad, które pomogą D3 zrobić to thing. I ve umieścił kopię pliku służącego do rysowania etykietek narzędzi do sekcji "Pobieranie" z ogólnymi przykładami jak. Edit 2017-05-02 Po ciekawym pytaniu poniżej dodałem nowy post zawierający link HTML podane w etykietkach narzędzi i może to być znaleziono tutaj. Powyższy opis i mnóstwo innych rzeczy znajduje się w dokumencie D3 Tips and Tricks, który można uzyskać na stronie pobierania. długa droga w ciągu ostatnich dwóch dni i rozpoczęła pracę z własnymi danymi I ve aktualnie dwie linie na prawidłowym wyświetlaniu wykresu i teraz patrząc na ustawienie przejścia, które pozwolą na każdą linię być przyniesione po kliknięciu przycisku Wszelkie przykłady z jak to bywało. Doceniam wysiłek w tym, że wszystko się uda. Wielkie rzeczy Justin Doskonale słyszy, że informacje są użyteczne Nie mam przykładu kodu podstawowego, który można śledzić, ale jeśli to jakieś pocieszenie, to na mój długi i coraz dłużej lista rzeczy do dodania do porad i wskazówek ręcznych Mike Dewar ma naprawdę dobry przykład w swojej książce Pierwsze kroki z D3, które wykorzystuje wiele wierszy i przełączasz legendę, aby je włączyć i wyłączyć Ale za moje pieniądze Chciałbym zacząć od doskonałego postu przez Jerome'a Cukier o przejściach tutaj jeden z jego przykładów wygląda dokładnie tak, jak opisujesz i będę przyglądać mu się daleko, jeśli nadejdzie czas, aby dodać to do podręcznika Kiedy się posortujesz, jeśli uważasz, że byłby użyteczny dodatek do wskazówek i porad sztuczek byłbym naprawdę chętnie go dodać, jeśli jesteś szczęśliwy, aby zwolnić kod - dzięki za czytanie. Odpowiedź brzmi tak, był mój przyjaciel Niestety próbuje umieścić kod w komentarzach tutaj myli blog próbuje połączyć się z adresem url zamiast go wyświetlać - ale po prostu dodaj przykładowy odnośnik na stronie w3schools powyżej do wiersza, który dodaje tekst do Twojego hiperłącza Jedyne, co półznaczne, co musiałem zrobić, to umieścić link z tagami pojedyncze znaki mowy zamiast podwójnych znaków mowy, ponieważ adres URL musiał być w podwójnym znaczeniu mowy. Jedynym prawdziwym problemem jest to, że w celu dotarcia do niego musisz przesunąć mysz tak daleko, że wskazówka zniknie Oczywiście to może być rozwiązane przez kilka sposobów w zależności od tego, co jest odpowiednie dla etykiety narzędzia. Tak tak Wielkie pytanie i rzeczywiste odpowiedzi. Wstrząsnęłam z podekscytowaniem i nie przeczytałem poprawnie Twojego posta Teraz, gdy widzę, że doświadczam tego samego problemu, o którym myślę że jest rozwiązanie, ale wiąże się z blokowaniem zdarzeń z myszy Więc zastanawiam się, czy możemy być w sytuacji jaj kurzych, gdzie możemy zrobić jedną rzecz, ale to uniemożliwia nam zrobienie innego Hmm. Thanks dla szybkiej odpowiedzi próbowałem, i Włożyłem opóźnienie w kursorze myszy t ransition, tak, że mogę teraz przesunąć kursor myszy i kliknąć na pasku narzędzi, zanim zniknie Tekst pojawia się w postaci sformatowanego jako hiperłącze w pasku narzędzi, ale kliknięcie na niego nie osiąga niczego, co nie otwiera strona docelowa Mam czegoś brakuje. Tak sądzę, że brakuje im czegoś, co czuję, że używając zdarzenia myszy jako wyzwalacza, wtedy wiążemy działanie myszy z etykietką, więc gdy pojawi się hiperlink, mysz nadal jest związana z obiektem pochodzącym i ignoruje link Moje doświadczenia w tej dziedzinie niestety brakuje Ja obawiam się, że to moje najlepsze przypuszczenie Jeśli to musi być dla Twojej wizualizacji, zadaj pytanie na temat wymiany stosu Istnieje mnóstwo ludzi na tym forum z rzadkimi umiejętnościami Sorry I wasn t w stanie pomóc więcej. Good pytanie Sekretem jest zawinięcie części tekstu, którą chcesz połączyć ze znacznikami, które przez dźwięk, który już zrobiłeś, a następnie usunięcie wskaźnika-zdarzenia żaden atrybut z sekcji stylu inaczej mysz będzie zignoruj obecność końcówki narzędzia Wygenerowałem przykład na perusale Znowu, dobre pytanie. Obecnie zmieniłam również sposób, w jaki pojawia się wierzchołek narzędzia i zniknie, dzięki czemu dostajesz więcej szans na pozostanie na ekranie, gdy przesuń mysz z kropki na wykresie. Hej, próbuję stworzyć prostą wykres rozproszony z etykietką Mój plik csv to kraj, x, y, chcę, aby nazwa kraju x, y pojawiała się, aby oznaczyć każdy punkt danych na myszka tam jest skupiona wokół siebie wokół pochodzenia, więc jest trochę niechlujny dla zwykłego problemu, szukając prostego rozwiązania. Hmm Od razu pierwsza myśl o tym, aby masować dane przed rysowaniem wykresu Można to zrobić dynamicznie przy użyciu skryptu php że załadowano csv, masaże i wyjścia jako JSON lub csv ponownie Nie całkiem proste jednak jeśli nie znasz php mam wrażenie, że będzie dostępna metoda w d3 s funkcje tablicowe lub na tej stronie może pomóc, ale ja przepraszam że nie wykorzystałem ich poważnie Jeśli możesz połączyć przykład dla osób, które będą komentować kolejne pytania dotyczące przepełnienia stosu, może wywołać odpowiedź Dobre pytanie. Na instrukcje Mogę prosić o poradę Podczas przewijania myszy mój kod nie zachowuje adresu URL w widoku podczas przenoszenia kursor do adresu URL URL może być klikalny, ale zanika podczas przenoszenia Przesuwanie kursora Próbowałem różnych czasów, ale nie uzyskując takich samych wyników jak w przykładzie wykresu Oto przykład, który zawiera również link do dolnego pola testowego Jak należy Aktualizuję kod, aby osiągnąć te same wyniki, które pokazano na wykresie. Ahh Dobre pytanie i przepraszam za niewybaczalne opóźnienie w odpowiedziach W Twoim przypadku, a jeden powyżej adresu URL zanika, ponieważ gdy mysz porusza się z obiektem, natychmiast spróbuje odejść. , możesz zauważyć, że w artykule dodano dodatkowy link, który dodałem w 201, które zawiera linki do nowego postu pokazujące, jak osiągnąć coś bardzo podobnego do tego, czego szukasz. Sprawdź to i zobacz jak się masz.
No comments:
Post a Comment