AI m bruker Highstock kartleggingsbiblioteket for et finansprosjekt av meg. Imidlertid blir jeg falt ned i ytelsesproblemer. Min arbeidsmessige implementering av Highstock har jeg 5 grafer i et diagram ii flere linjer og linjetyper i en graf iii etiketter på punkter på en graf iv nye data som kommer omtrent en gang per sekund, legger du til et punkt og animerer grafen til venstre. Det er imidlertid noen få kritiske problemer jeg minner om med dette oppsettet. Rendingen er veldig sakte Dette er et ytelsesproblem på grunn av mengden og antall ganger grafer blir trukket. Kan ikke justere tidsintervallkontroll nederst Et ytelsesproblem på grunn av kontroller fryser. Jeg kan legge til et punkt, animere grafen til venstre. Jeg kan imidlertid ikke legge til et flagg med det nye datapunktet. Se dette SØK issue. CI ser ikke en enkel løsning på disse Highstock-problemene. Det er et utmerket bibliotek. Men jeg så på Google Charts API for å se om det kunne oppfylle disse punktene. Fordeling av Google Charts API overstiger Highstock gitt alle interaksjonene under. Multiple diagrammer på en side. Multiple overlappende diagrammer i 1 view. Charts for linje, områdeområde, Histogram, Terskel linjer se røde grønne linjer abouve. Legg til et flagg til et punkt på min tidsserier. Legg til et punkt til min tidsserielinjediagram. Legg til et punktflagg samtidig til min tidsserielinjediagram. Har noen gått gjennom noe lignende Er det andre måter å forbedre min highstock-ytelse på. Kan Google-diagrammer gjøre en bedre jobb her. Min highcharts-invokasjon ser ut som dette Clojurescript kode. I min erfaring utfører Google-kartleggingsbiblioteket seg bedre enn Highcharts, men uten mer oppføring eller en kopi av konfigurasjonsdataene dine, kan det være vanskelig å isolere bestemte problemer som kan bidra til langsom ytelse. Anbefaling NVD3-linjekart med visningsfinder. Hvis det er et aksjekart du er etter eller et diagram virkelig, sannsynligvis det mektigste kartleggingsbiblioteket der ute, er d3. Det er et ledsagerbibliotek som utnytter d3 kalt nvd3 som gir sett av gjenbrukbare grafer, kan det hende du vil se på linjediagrammet med visningsfinder. Det vil ikke akkurat etterligne det du har for øyeblikket, men i min erfaring er ikke bare ytelsen bedre, men hvis du vet litt av JS d3, er det uendelig enklere å tilpasse under hetten og ikke bare kosmetisk - pluss det er mange flere mennesker der ute med erfaring, og villig til å hjelpe. ansvaret 11. april kl 14 på 13 48. Vi bruker Node for rapportering, men ikke som en del av vårt viktigste signalgenererende handelssystem. vær ærlig svaret vil nesten helt sikkert være ja for alle vanlige programmeringsteknologi, da det bare tar en person å bruke den et sted for å svare ja. Bare se på OCaml, før Jane Street, de fleste techno logiest på gata hadde aldri hørt om det og nå er det veldig godt kjent. Trolig det kanoniske svaret på denne typen spørsmålet burde være dette. META RANT Generelt finner jeg disse typene spørsmål litt bekymrende for dette nettstedet av to grunner. For et hvilket som helst programmeringsspråk eller stabling hvis du en Sk er noen som bruker dette til handel svaret er mest sannsynlig ja. Det er ikke noe reelt utfall eller oppfordring fra spørsmålet Hvis noen svarer ja, så hva hvis noen svarer nei, så hva Hva er det kanoniske svaret på et spørsmål som dette det. Eller satt på en annen måte, hvilket svar ville gjøre plakaten lykkelig her. Svaret 11. juni 14 på 14 52. Følgende innlegg er en del av D3 Tips og triks-dokumentet som det er gratis å laste ned For å bruke dette innlegget i kontekst, bør du vurdere det med de andre i bloggen, eller bare last ned pdf og eller eksemplene fra nedlastingssiden. Tipping tips har en fantastisk dualitet De er på den ene siden en pen darned nyttig ting som hjelper til med å gi sammenheng og informasjon der det er nødvendig, og på den annen side , hvis de er gjort med litt omhu, kan de se veldig stilig ut. Teknisk representerer de en liten bevegelse fra det vi har spilt med så langt inn i en mer kompleks arena av overganger og hendelser. Du kan ta dette på to måter. Enten aksepter at det bare fungerer og implementerer det som vist, eller du vil vite hva som foregår og føler deg fri til å avlede min innsats som en rang amatør. Kilde for implementeringen ble tatt fra Mike Bostock s eksempel her Dette ble kombinert med et par andre bit s og stykker den vanskeligste jobber ut hvordan du formaterer den viste datoen riktig og setter inn en linjeskift i verktøytipset som jeg fant her godt gjort for alle som deltar i denne diskusjonen. Jeg antar at noen eller alle feilene som oppstår i implementeringen vil være min, mens noen suksesser vil være nede til de opprinnelige bidragsyterne. Så, bare hvis det er noen grad av forvirring, er et verktøytip ett ord eller to et diskret stykke informasjon som vil komme til syne når musen svever over et bestemt sted De fleste av oss har sett og brukt dem, men jeg antar at vi alle har en tendens til å kalle dem forskjellige ting som infotip, hint eller hover-boks jeg vet ikke om det er et riktig navn for dem, men her er et eksempel på hva vi prøver å oppnå. Du kan se at musen har svevet over en av scatter plot sirkler og et tips har dukket opp som gir brukeren den nøyaktige datoen og verdien for det punktet. Nå kan du også legge merke til at det er en viss grad av fancy her da informasjonen er bundet av en rektangulær form med avrundede hjørner og en svak ustabilitet. Det andre fancy som du ikke ser i en pdf er at når disse verktøytipsene vises og forsvinner, gjør de det i en elegant fade-in , fade-out måte Purty. Now, før vi begynner å beskrive hvordan koden går sammen, la oss ta en rask titt på de to teknikkspesifikasjonene som jeg nevnte tidligere, overganger og hendelser. Fra hovedwebsiden er overganger beskrevet som gradvis interpolerende stiler og attributter over tid Så hva jeg tar det å bety er at hvis du vil endre et objekt, kan du gjøre det ved å bare angi endestypen for attributtstilen du vil at den skal ende opp med og den tiden du vil ha den til ta og gå. Selvfølgelig, jeg ts ikke helt så enkelt, men heldigvis smartere folk enn jeg har gjort noe fantastisk arbeid som beskriver forskjellige aspekter av overganger, så se følgende for en mer komplett beskrivelse av emnet. Helt å observere mouseover og mouseout overganger i verktøylinjene vil eksempel din appetitt for mer. Den andre teknikken er relatert til mushendelser Dette beskriver nettleseren å se på når noe skjer med musen på skjermen, og når det gjør det, tar det en spesifisert handling. En sannsynligvis ikke-omfattende liste over hendelsestyper er følgende. mousedown Utløses av et element når en museknapp trykkes ned over det. mouseup Utløses av et element når en museknapp slippes ut over det. mouseover Utløses av et element når musen kommer over den. mva. Utløses av et element når musen går ut av det. mousemove Triggered av et element på hver mus bevege seg over it. click Triggered av et museklikk mousedown og deretter mouseup over et element. c ontextmenu Triggered av en høyreklikk museklikk over et element. dblclick Utløses av to klikk innen kort tid over et element. Hvor mange av disse er gyldige å bruke innen d3 Jeg er ikke sikker, men jeg er villig til å satse på at det er sannsynligvis mer enn de her også. Vennligst gå til en langt bedre beskrivelse av emnet hvis nødvendig. Få tipping. So, styrket med et par nye konsepter å vurdere, la oss se hvordan de er vedtatt i praksis. Hvis vi starter med vår enkle plottingsdiagram er det 4 områder i det vi vil ønske å endre, det kan være enklere å sjekke filen i eksempelfilene i nedlastingsdelen på. Det første området er CSS Følgende kode skal legges like før stilen. Disse stilene definerer hvordan vårt verktøytips vil dukke opp. De fleste av dem er ganske rett frem. Plasseringen av verktøytipset er gjort i absolutte målinger, ikke relative. Teksten er midtjustert, høyden, bredden og fargen på rektangelet er 28px , 60px og lightsteelblue res pektivt Polstring er en interessant funksjon som gir en fin måte å vokse en form på med et fast beløp fra en spesifisert størrelse. Vi setter grensen til 0px slik at den ikke vises, og en fin stil attributt kalt grense-radius gir den fine avrundede hjørner på rektanglet. Sist men ikke minst, er pekeren-hendelsene ingen linje på plass for å instruere musen hendelsen å gå gjennom elementet og målrette hva som helst under det elementet i stedet Les mer her Det betyr at selv om verktøytips delvis skjuler sirkelen, koden vil fungere som om musen er over bare sirkelen. Det andre tillegget er en enkel en-liner som bør for form skyld skje under parseData-variabeldeklarasjonen. Denne linjen formaterer datoen da den vises i vårt verktøytips Uten det, ville tiden være standard for en forstyrrende lang kombinasjon av tidsmessige detaljer I tilfellet her har vi erklært at vi vil se dagen i måneden e og hele månedsnavnet B. Den tredje koden i kode jeg s funksjonsdeklarasjonen for div. We kan plassere det like etter valueline-definisjonen i JavaScript Again det er ikke for mye her som er overraskende. Vi forteller det å knytte div til kroppselementet, vi setter klassen til verktøytipklassen fra CSS og vi stiller opaciteten til null Det kan høres rart å ha opaciteten satt til null, men husk at det er en naturlig tilstand av et verktøytip. Det vil leve usynlig til det når åpenbaringstidspunktet kommer opp og det kommer opp. Den endelige blokk av kode er litt mer komplisert og kan beskrives som en mutant versjon av den pene lille koden som vi pleide å gjøre tegningen av prikkene for scatter plot. Det er fordi verktøylinjene handler om scatter plot sirkler Uten en sirkel for å overføre, vises verktøytipset aldri. Så her er koden som inneholder scatterplotte tegningen, som er inkludert, siden den er ganske integrert. Før vi begynner å gå gjennom koden, inneholder eksempelfilen for verktøylinjene som er på, en kort serie med kommentarer for linjene som er lagt til eller endret fra scatter plot, så hvis du vil sammenligne hva som foregår i kontekst, er det et alternativ. De første seks linjene i koden er en gjentagelse av scatter plot drawing script. De eneste endringene er at vi har økt sirkelens radius fra 3 5 til 5 bare for å gjøre det lettere å musen over objektet, og vi har fjernet semikolonet fra cy-attributtlinjen siden koden nå må fortsette. Så tilleggene er ødelagte. inn i områder som samsvarer med de to hendelsene mouseover og mouseout Når musen beveger seg over noen av kretsene i scatter-plottet, blir mouseover-koden utført på div-elementet Når musen beveges fra sirkelen, utføres et annet sett med instruksjoner . Det ville være en feil å tenke på verktøytips i flertallet fordi det er mange serier av individuelle verktøytips som bare venter på å vises for deres spesifikke sirkel. Det er bare ett verktøytips som vises når musen beveger seg over en sirkel. Og avhengig av w hatten sirkel det er over, vil egenskapene til verktøytipset endre seg litt med hensyn til posisjon og innhold. På mouseover-linjen initierer innføringen av verktøytipset. Da erklærer vi elementet vi skal introdusere div, og at vi skal anvende en overgang til det er introduksjonsovergang De neste to linjene beskriver overgangen. Det vil ta 200 millisekunder varighet 200 og vil resultere i å endre elementets ugjennomsiktighet til 9 stilopaciteter. 9 Gitt at naturtilstanden til vårt verktøytips er en opasitet på 0, er dette fornuftig for noe som ser ut, men det går ikke helt til et solidt objekt, og det beholder en liten gjennomsiktighet bare for å gjøre det ser mindre permanent. Følgende tre linjer formaterer vårt verktøytips Den første legger til et HTML-element som inneholder vår x - og y-informasjon dato og verdi Nå er dette gjort på en litt merkelig måte Andre verktøytips som jeg har sett har brukt et element i stedet for en, men jeg har brukt i dette tilfellet fordi jeg ønsket å inkludere line break tag br for å skille dato og verdi Jeg er sikker på at det finnes andre måter å gjøre det på, men dette virket for meg Den andre interessante delen av denne linjen er at dette er hvor vi kaller vår tidsformatering funksjon som vi beskrev tidligere neste to linjer plasserer verktøytipset på skjermen og for å gjøre dette, tar de x - og y-koordinatene til musen når arrangementet finner sted med og utklippene og bruker en korreksjon i tilfelle av y-koordinaten for å heve verktøytipset opp med det samme beløpet som sin høyde 28 piksler. På Mouseout-delen er litt enklere fordi det ikke trenger å gjøre noen fancy tekst-html-koordinater. Alt du trenger å gjøre er å fade ut div-elementet Og det gjøres ved å bare reversere opaciteten tilbake til 0 og sette varigheten for overgangen til 500 millisekunder er litt lengre enn fade-in gjør det ser litt kjøligere IMHO. Right, der du går Som en beskrivelse det endte med å være litt av en vegg av tekst jeg er redd Men forhåpentligvis mellom e xplanering og eksempelkoden du får ideen Ta deg tid til å fla med innstillingene beskrevet her for å finne de som jobber for deg, og i prosessen vil du forsterke noen av prinsippene som hjelper D3 til å gjøre det s ting. Jeg har plassert en kopi av filen for å tegne verktøytipsene i nedlastingsseksjonen med de generelle eksemplene as. Edit 2014-05-02 Etter et interessant spørsmål nedenfor har jeg lagt til et nytt innlegg på, inkludert en HTML-kobling uten verktøytips, og det kan være funnet her. Ovennevnte beskrivelse og masser av andre ting er i D3 Tips og triks-dokumentet som kan nås fra nedlastingssiden av. Følg eksemplene dine fra start til slutt og fant dem veldig nyttige. Som en komplett nybegynner på D3, har jeg kommet langt over de siste to dagene og begynte å jobbe med mine egne data. Jeg har for øyeblikket to linjer på grafen som viser riktig og ser nå på å sette opp en overgang som gjør det mulig for hver linje å bli hentet inn ved å klikke på en knapp. Noen eksempler av hvordan dette ville fungere. appreciate deg innsats for å få alt dette på line. Great ting Justin Utmerket å høre at informasjonen er nyttig Jeg har ikke et eksempel på grunnleggende koden du kan følge, men hvis det er noen trøst, er det s på min lange og få lengre liste over ting å legge til på tips og triks manualen Mike Dewar har et veldig godt eksempel i sin bok Komme i gang med D3 som bruker flere linjer, og du bytter en legende for å slå dem på og av Men for pengene mine Jeg ville starte med et utmerket innlegg av Jerome Cukier på overganger her en av hans eksempler ser ut akkurat som du beskriver og jeg vil ta en lang hard titt på det når det kommer tid til å legge til dette i håndboken Når du får det sortert, hvis du tror det ville være et nyttig tillegg til tips og triks manualen jeg ville være veldig opptatt av å legge det inn hvis du er glad for å slippe koden - Takk for å lese. Svaret er Ja var min venn Dessverre prøver du å sette koden inn i kommentarene her forvirrer bloggen og den prøver å lenke til nettadressen i stedet for å vise den - men bare legge til en eksempellink per w3schools-siden over til linjen som legger til teksten for hyperkoblingen din. Den eneste halvkomplicerte tingen jeg måtte gjøre var å sette koblingen med koder i enkle talemerker i stedet for doble talemerker siden nettadressen behøvde å være i dobbelt talemerker. Det eneste virkelige problemet da var at for å nå det må du flytte musen så langt at verktøytipset forsvinner. Selvfølgelig kan dette løses av flere betyr avhengig av hva som passer for tooltip. So ja Flott spørsmål og et faktisk svar. Snart fikk jeg alt spent og lest ikke innlegget ditt riktig. Nå som jeg har, ser jeg at jeg opplever det samme problemet som du tror at det er en løsning, men det innebærer å blokkere musarrangementer. Så jeg lurer på om vi kan være i en kyllingeggsituasjon der vi kan gjøre en ting, men det hindrer oss i å gjøre en annen Hmm. Takk for det raske svaret jeg prøvde det, og Jeg legger en forsinkelse i mouseout t ransisjon, slik at jeg faktisk kan flytte musen over og klikke på verktøytipset før den forsvinner Teksten vises formatert som en hyperkobling i verktøylippen, men ved å klikke på den, oppnår du ikke noe som målsiden ikke åpner. Mangler jeg noe. Ja, jeg tror at vi begge mangler noe jeg får følelsen av at ved å bruke en mushendelse som en utløser, binder vi deretter musen til instrumenttipset, slik at mens hyperkoblingen vises, er musen fortsatt bundet til opprinnelsesobjektet og ignorerer lenken Min erfaring i dette området mangler dessverre jeg er redd Det er min beste gjetning Hvis det er nødvendig å visualisere, still et spørsmål om stablingsutveksling Det er en masse folk i det forumet med noen sjeldne ferdigheter Beklager jeg var ikke t kan hjelpe mer. Godt spørsmål Hemmeligheten er å pakke inn delen av teksten du vil koble til med en tagger som av lyden av den du har gjort allerede, og så fjerner pekeren-hendelsene ingen attributt fra stilavsnittet ellers musen vil ignorere tilstedeværelsen av verktøytipset jeg har generert et eksempel på for din vurdering. Igjen, godt spørsmål. Jeg har også endret måten verktøytipset vises og forsvinner, slik at det blir mer sjansen til å bli på skjermen når du flytte musen av prikken på grafen. Hei, jeg prøver å lage et enkelt spredningsdiagram med verktøytip. Min csv-fil er land, x, y, jeg vil bare ha landnavnet x, y for å komme opp for å merke hvert datapunkt på musen der borte er. 200 klynget sammen rundt en opprinnelse, så det er litt ryddig å lette. Enkelt problem, leter etter enkel løsning. Hmm Rett bort, min første tanke er å massere dataene før du tegner grafen. Det kan gjøres dynamisk ved hjelp av et php script som lastet csv, massasjer og utdata som JSON eller csv igjen Ikke helt enkelt, men hvis du ikke er kjent med php, har jeg følelsen av at det finnes en metode tilgjengelig innen d3 s array-funksjoner, eller denne siden kan hjelpe, men jeg beklager si at jeg ikke har brukt dem seriøst Hvis du kan sette sammen et eksempel på for folk å kommentere på et etterfølgende spørsmål om stakkoverløp, kan det fremkalle et svar Godt spørsmål. TJENESTER FOR INSTRUKSJONENE Kan jeg be om råd På mouseover beholder koden min ikke nettadressen når du flytter markør til URL-adressen URL-adressen er klikkbar, men det fades ut når du flytter jeg flytter markøren. Har prøvd forskjellige varigheter, men ikke får de samme resultatene som vises i diagrammet ditt. Her er et strekning som også inneholder en lenke til testkassen nederst. Hvordan skal det Jeg oppdaterer koden for å oppnå de samme resultatene som vises i diagrammet. Åh Godt spørsmål og unnskyldning for uforsvarlig forsinkelse ved å svare I ditt tilfelle og den ovenfor overlater url fordi fordi musen beveger seg fra objektet, vil det umiddelbart forsøke å overgå , kan du legge merke til at det er en ekstra lenke i innlegget som jeg la til i 201 som kobler til et nytt innlegg som viser hvordan du oppnår noe som ligner på det du leter etter. Sjekk det og se hvordan du kommer videre.
No comments:
Post a Comment