AI m mit der Highstock Charting-Bibliothek für ein Finanzprojekt von mir Aber ich bin immer in Performance-Probleme verpasst Meine Arbeits-Implementierung von Highstock hat i 5 Graphen in einem Diagramm ii mehrere Zeilen und Zeilentypen in einem Diagramm iii Etiketten auf Punkte angewendet Auf einem Diagramm iv neue Daten, die etwa einmal pro Sekunde ankommen, einen Punkt hinzufügen und die Grafik nach links animieren. Allerdings gibt es ein paar kritische Probleme, die ich mit diesem Setup einläufe. Rendering ist sehr langsam Dies ist ein Performance-Problem aufgrund der Menge und Anzahl der Zeiten der Graphen gezeichnet werden. Kann t anpassen Zeitbereich Kontrolle am unteren Ein Leistungsproblem aufgrund von Kontrollen Einfrieren. Ich kann einen Punkt hinzufügen, animieren die Grafik nach links Allerdings kann ich t fügen Sie eine Flagge mit dem neuen Datenpunkt Siehe diese SO Issue. CI don t sehen eine einfache Lösung für diese Highstock Probleme Es ist eine hervorragende Bibliothek Aber ich war auf der Google Charts API zu sehen, ob es diese Punkte zu erfüllen. Performance von Google Charts API überschreitet Highstock bei all den Interaktionen unten. Mehrere Charts Auf einer Seite. Mehrere überlappende Diagramme in 1 view. Charts für Linie, Bereichsbereich, Histogramm, Threshold Linien sehen rote grüne Linien abouve. Easily fügen Sie eine Fahne zu einem Punkt auf meiner Zeitreihe. Easily fügen Sie einen Punkt zu meinem Zeitreihenlinie Diagramm hinzu. Eineily fügen Sie ein Punkt-Flag gleichzeitig zu meiner Zeitreihe Linie graph. D Hat jemand durch irgendetwas gegangen Gibt es andere Möglichkeiten, um meine Highstock-Performance zu verbessern Kann Google Charts doa besseren Job here. Ps Meine Highcharts Aufruf sieht aus wie dieser Clojurescript Code. In meinem Erfahrung, die Google Charting-Bibliothek führt besser als Highcharts, aber ohne mehr Markup zur Verfügung gestellt oder eine Kopie Ihrer Config-Daten wäre es schwer, bestimmte Probleme zu isolieren, die zu langsamen Leistung beitragen könnte. Empfehlung NVD3-Line-Diagramm mit View-Finder. Wenn eine Aktie Diagramm Sie re nach oder irgendein Diagramm wirklich, vermutlich die leistungsstärkste Chartingbibliothek dort draussen ist d3.There ist eine Begleitbibliothek, die d3 nvd3 nennt, das Sätze der wiederverwendbaren Graphen zur Verfügung stellt, können Sie an ihrem Liniendiagramm mit Ansichtsfinder sehen Wont genau imitieren, was Sie derzeit an Ort und Stelle haben, aber in meiner Erfahrung ist nicht nur die Leistung besser, aber wenn Sie ein bisschen von JS d3 wissen, ist es unendlich einfacher, sich unter die Kapuze anzupassen und nicht nur kosmetisch - und es gibt noch viel mehr Leute Dort mit Erfahrung adn bereit zu helfen. answered Apr 11 14 bei 13 48.Wir verwenden Knoten für die Berichterstattung, aber nicht als Teil unserer Hauptsignal generierenden Handelssystem. Um ehrlich zu sein, wird die Antwort fast sicher ja für jede gängige Programmiertechnologie wie es sein Nimmt nur eine Person, um es irgendwo zu benutzen, um die Antwort zu machen ja. Just Blick auf OCaml, vor Jane Straße, die meisten techno logiest auf der Straße hatte noch nie davon gehört und jetzt seine sehr gut bekannt. Wahrscheinlich die kanonische Antwort für diese Art von Frage Sollte diese ein. META RANT Im Allgemeinen finde ich diese Art von Fragen ein bisschen beunruhigend für diese Website aus zwei Gründen. für jede gegebene Programmiersprache oder Stack, wenn Sie fragen, ist jemand mit diesem für den Handel der Antwort ist meist wahrscheinlich ja. Es gibt Kein wirkliches Ergebnis oder Aufruf zum Handeln aus der Frage Wenn jemand ja antwortet, also was, wenn jemand nein antwortet, also was Was ist die kanonische Antwort auf eine Frage wie diese. Auf einen anderen Weg, welche Antwort würde das Plakat hier glücklich machen? Beantwortet Jun 11 14 bei 14 52. Die folgende Post ist ein Teil der D3 Tipps und Tricks Dokument, die es kostenlos herunterladen können Um diesen Beitrag im Kontext verwenden, betrachten Sie es mit den anderen im Blog oder laden Sie einfach die pdf und oder die Beispiele Von der downloads page. Tooltips haben eine wunderbare Dualität Sie sind auf der einen Seite eine hübsche verdammte nützliche Sache, die hilft, Kontext und Informationen zu geben, wo nötig und auf der anderen Seite, wenn mit ein bisschen Sorgfalt gemacht, können sie sehr stilvoll aussehen. Technisch , Sie stellen einen leichten Schritt von dem dar, was wir bisher mit einer so viel komplizierteren Arena von Übergängen und Ereignissen gespielt haben. Sie können diese von zwei Weisen nehmen. Entweder akzeptieren Sie, dass es nur funktioniert und implementiert es wie gezeigt, oder Sie werden wissen, was S los und fühlen sich frei, meine Bemühungen als die eines Ranges amateur zu verderben. Die Quelle für die Implementierung wurde von Mike Bostocks Beispiel hier genommen. Dies wurde mit ein paar anderen Bits und Stücke kombiniert, die die schwierigsten ausarbeiten, wie man das formatiert Angezeigte Datum korrekt und Einfügen eines Zeilenumbruchs in der Tooltip, die ich hier gut gefunden habe, um alle, die an dieser Diskussion teilnehmen, mache ich die Annahme, dass irgendwelche oder alle Fehler, die bei der Implementierung auftreten, mir gehören werden, während alle Erfolge auf Die ursprüngliche Mitwirkende. So, nur für den Fall gibt es ein gewisses Maß an Verwirrung, ein Tooltip ein Wort oder zwei ist eine diskrete Stück von Informationen, die Pop in die Ansicht, wenn die Maus ist über irgendwo spezialisiert Die meisten von uns haben gesehen und verwendet, Aber ich nehme an, wir alle neigen dazu, sie verschiedene Dinge wie Infotip, Tipp oder Hover-Box Ich weiß nicht, ob es einen richtigen Namen für sie, aber hier ist ein Beispiel für das, was wir versuchen, zu erreichen. Sie können sehen, die Maus hat Schwebte über einen der Scatter-Plot-Kreise und ein Trinkgeld, der dem Benutzer das genaue Datum und den Wert für diesen Punkt zur Verfügung stellt. Jetzt können Sie auch feststellen, dass hier ein gewisses Maß an Phantasie hier liegt, da die Information durch eine rechteckige Form gebunden ist Whit abgerundete Ecken und eine leichte Opazität Das andere Stück der Phantasie, die du nicht in einem PDF sehen möchtest, ist, dass wenn diese Tooltips erscheinen und verschwinden, tun sie dies in einem eleganten Einblendung, Fade-out Weg Purty. Now, bevor wir Fangen Sie an zu beschreiben, wie der Code zusammen geht, lassen Sie sich einen Blick auf die beiden Technik-Besonderheiten, die ich bereits erwähnt habe, Übergänge und Ereignisse. Von der wichtigsten Web-Seite Übergänge sind beschrieben als allmählich Interpolation von Stilen und Attributen im Laufe der Zeit Also, was ich das nehme Zu verstehen ist, dass, wenn Sie ein Objekt ändern wollen, können Sie dies einfach die Angabe der Attribut Stil Endpunkt, dass Sie wollen, dass es am Ende mit und die Zeit, die Sie wollen, dass es zu nehmen und gehen. Natürlich ist es nicht ganz Dass einfach, aber zum Glück, intelligentere Menschen, als ich einige fantastische Arbeit, die verschiedene Aspekte der Übergänge beschrieben, so sehen Sie bitte die folgenden für eine ausführlichere Beschreibung des Themas. Hoply Beobachtung der Mouseover und Mouseout Übergänge in der Tooltips Beispiel wird Ihr Appetit für More. Die andere Technik bezieht sich auf Mausereignisse Dies beschreibt den Browser, der beobachtet, wann etwas mit der Maus auf dem Bildschirm passiert und wenn es tut, dauert es eine bestimmte Aktion Eine wohl nicht umfassende Liste der Arten von Ereignissen sind die folgenden. Mousedown Ausgelöst durch ein Element, wenn eine Maustaste gedrückt wird über it. mouseup Ausgelöst durch ein Element, wenn eine Maustaste über it. mouseover ausgelöst wird Ausgelöst durch ein Element, wenn die Maus kommt über it. mouseout Ausgelöst durch ein Element, wenn die Maus geht Out of it. mousemove Ausgelöst durch ein Element auf jeder Maus bewegen sich über it. click Ausgelöst durch einen Mausklick mousedown und dann mouseup über ein element. contextmenu Ausgelöst durch eine rechte Maustaste Mausklick über ein element. dblclick Ausgelöst durch zwei Klicks innerhalb eines Kurze Zeit über ein Element. Wie viele von diesen sind gültig, um innerhalb d3 verwenden Ich bin nicht sicher, aber ich bin bereit zu wetten, dass es wahrscheinlich mehr als die hier auch gehen Bitte gehen Sie für eine weit bessere Beschreibung des Themas, wenn erforderlich. Get tipping. So, gestärkt mit ein paar neuen Konzepten zu betrachten, lassen Sie s sehen, wie sie in der Praxis umgesetzt werden. Wenn wir mit unserem einfach-Scatter-Diagramm beginnen, gibt es 4 Bereiche in ihm, die wir wollen, um es zu ändern kann Sei einfacher, die Datei in den Beispieldateien im Download-Bereich zu überprüfen. Der erste Bereich ist der CSS Der folgende Code sollte kurz vor dem Style-Tag hinzugefügt werden. Diese Stile definieren, wie unsere Tooltip erscheinen wird. Die meisten von ihnen sind ziemlich einfach Die Position der Tooltip erfolgt in absoluten Messungen, nicht relativ Der Text ist mittig ausgerichtet, die Höhe, die Breite und die Farbe des Rechtecks ist 28px, 60px und lightteelblue bzw. die Polsterung ist ein interessantes Merkmal, das eine ordentliche Art und Weise bietet, eine Form zu wachsen Um einen festen Betrag aus einer bestimmten Größe. Wir setzen die Boarder auf 0px, so dass es nicht t auftauchen und ein ordentliches Stil Attribut namens Rand-Radius bietet die schönen abgerundeten Ecken auf dem Rechteck. Lastly, aber keineswegs mindestens der Zeiger - es ist keine Linie vorhanden, um das Mausereignis zu veranlassen, durch das Element zu gehen und zu zielen, was unter diesem Element liegt. Lesen Sie hier mehr Das bedeutet, dass selbst wenn die Tooltip den Kreis teilweise verdeckt, wird der Code so funktionieren, als wäre die Maus Über nur den Kreis. Die zweite Ergänzung ist ein einfacher Einzeiler, der für Formulare unter der parseData Variablendeklaration platziert werden soll. Diese Zeile formatiert das Datum, wenn es in unserem Tooltip erscheint. Ohne sie würde die Zeit auf eine störend lange Kombination verzögern Von zeitlichen Details Im vorliegenden Fall haben wir erklärt, dass wir den Tag des Monats e und den vollen Monatsnamen sehen wollen B. Der dritte Codeblock ist die Funktionsdeklaration für div. We kann das kurz nach der Valuelin-Definition in setzen Das JavaScript wieder da ist nicht zu viel hier, das ist überraschend Wir sagen, dass es div an das Körper-Element anhängen, setzen wir die Klasse auf die Tooltip-Klasse aus dem CSS und wir setzen die Deckkraft auf null Es könnte seltsam klingen, um die Deckkraft gesetzt zu haben Zu null, aber denken Sie daran, dass der natürliche Zustand eines Tooltips Es wird leben, bis es Moment der Offenbarung ankommt und es auftaucht. Der letzte Block von Code ist etwas komplexer und könnte als eine mutante Version des ordentlichen beschrieben werden Ein bisschen Code, den wir verwendet haben, um die Zeichnung der Punkte für die Scatter-Plot zu machen Das s, weil die Tooltips alle über die Scatter-Plot-Kreise sind Ohne einen Kreis zum Mouseover, erscheint die Tooltip niemals. So hier ist der Code, der die Scatter enthält Handlung Zeichnung es s enthalten, da es ziemlich viel integral. Before wir beginnen, durch den Code, die Beispiel-Datei für Tooltips, die auf enthält eine kurze Reihe von Kommentaren für die Zeilen, die hinzugefügt oder geändert aus dem Scatter-Plot, also wenn Sie Möchte vergleichen, was im Kontext passiert ist, das ist eine Option. Die ersten sechs Zeilen des Codes sind eine Wiederholung des Scatter-Plot-Zeichenskripts Die einzigen Änderungen sind, dass wir den Radius des Kreises von 3 5 auf 5 erhöht haben Um es einfacher zu machen, die Maus über das Objekt zu entfernen, und wir haben das Semikolon aus der Cy-Attribut-Zeile entfernt, da der Code jetzt weitergehen muss. So werden die Ergänzungen in Bereiche eingeteilt, die den beiden Ereignissen entsprechen Mouseover und Mouseout Wenn sich die Maus bewegt Über einen der Kreise in der Scatter-Plot wird der Mouseover-Code auf dem div-Element ausgeführt Wenn die Maus aus dem Kreis verschoben wird, wird ein anderer Satz von Anweisungen ausgeführt. Es wäre ein Fehler, an Tooltips im Plural zu denken, weil es da ist Ta ganze Reihe von einzelnen Tooltips, die nur darauf warten, für ihren spezifischen Kreis zu erscheinen Es gibt nur eine Tooltip, die erscheinen wird, wenn die Maus über einen Kreis bewegt. Und je nachdem, welchen Kreis es über geht, ändern sich die Eigenschaften der Tooltip etwas in Bezug auf ihre Position und Inhalt. Auf der Mouseover-Linie initiiert die Einführung der Tooltip Dann erklären wir das Element, das wir div einführen werden und dass wir einen Übergang dazu anwenden werden. Der nächste zwei Zeilen beschreibt den Übergang Es dauert 200 Millisekunden Dauer 200 und wird dazu führen, dass die Veränderung der Elemente Deckkraft auf 9 Stil Deckkraft 9 Da der natürliche Zustand unserer Tooltip ist eine Opazität von 0, das macht Sinn für etwas erscheinen, aber es geht nicht den ganzen Weg zu einem soliden Objekt und es behält Eine leichte Transparenz, nur um es weniger auszusetzen. Die folgenden drei Zeilen formatieren unsere Tooltip Die erste fügt ein HTML-Element, das unsere x und y Informationen enthält das Datum und den Wert Nun ist dies in einer etwas seltsamen Weise gemacht Andere Tooltips, die ich Haben gesehen haben ein Element anstelle von einem, aber ich habe in diesem Fall verwendet, weil ich wollte das Zeilenumbruch Tag br, um das Datum und Wert zu trennen Ich bin sicher, es gibt andere Möglichkeiten, es zu tun, aber das hat für mich gearbeitet Der andere interessante Teil dieser Zeile ist, dass wir hier unsere Zeitformatierungsfunktion nennen, die wir früher beschrieben haben. Die nächsten beiden Zeilen positionieren die Tooltip auf dem Bildschirm und erledigen dabei die x - und y-Koordinaten der Maus, wenn das Ereignis dauert Platzieren Sie mit den und schnipsel und wenden Sie eine Korrektur im Falle der y-Koordinate an, um die Tooltip um die gleiche Menge wie ihre Höhe 28 Pixel zu erhöhen. Der Mouseout-Abschnitt ist etwas einfacher, da es keinen tollen Text html machen muss Koordinieren Zeug Alles, was es zu tun hat, ist, das div-Element auszublenden. Und das geschieht durch einfaches Umkehren der Deckkraft zurück auf 0 und Einstellung der Dauer für den Übergang auf 500 Millisekunden etwas länger als die Einblendung macht es sieht etwas kühler IMHO. Right, da gehst du Als eine Beschreibung ist es am Ende ein bisschen eine Wand des Textes Ich habe Angst Aber hoffentlich zwischen der Erklärung und dem Beispiel-Code erhalten Sie die Idee Bitte nehmen Sie sich die Zeit, um mit den hier beschriebenen Einstellungen zu spielen Finden Sie diejenigen, die für Sie arbeiten und in dem Prozess werden Sie einige der Prinzipien, die D3 tun, es s thing zu helfen. Ich habe eine Kopie der Datei für das Zeichnen der Tooltips in den Download-Abschnitt auf mit den allgemeinen Beispielen as. Edit 2014-05-02 Nach einer interessanten Frage unten habe ich einen neuen Beitrag auf ein HTML-Link in out Tooltips hinzugefügt und es kann hier gefunden werden. Die obige Beschreibung und Haufen von anderen Sachen ist in der D3 Tipps und Tricks Dokument, das sein kann Zugriff auf die Downloadseite von. Folgend Ihre Beispiele von Anfang bis Ende und fand sie wirklich nützlich Als ein kompletter Anfänger bei D3 Ich gehe einen langen Weg über die letzten zwei Tage und begann mit meinen eigenen Daten zu arbeiten, ich habe derzeit zwei Zeilen auf der Diagramm, das ordnungsgemäß anzeigt und nun auf der Suche nach dem Aufbau eines Übergangs, der für jede Zeile erlaubt wird, wenn man auf einen Knopf gebracht wird, irgendwelche Beispiele dafür, wie das funktionieren würde. Schätzen Sie sich Anstrengung, um all dies auf line. Great Sachen Justin Excellent zu hören Dass die Informationen nützlich sind, ich habe nicht ein Beispiel für den grundlegenden Code, den Sie folgen könnten, aber wenn es irgendwelche Trost ist, ist es auf meine lange und immer längere Liste der Dinge, um die Tipps und Tricks Handbuch hinzufügen Mike Dewar hat ein Wirklich gutes Beispiel in seinem Buch Erste Schritte mit D3, die mehrere Zeilen benutzt und du eine Legende umschalt, um sie ein - und auszuschalten. Aber für mein Geld würde ich mit einem hervorragenden Beitrag von Jerome Cukier auf Übergängen beginnen. Eines seiner Beispiele sieht genau so aus Sie beschreiben und ich werde einen langen harten Blick auf sie nehmen, wenn es Zeit ist, dies dem Handbuch hinzuzufügen Wenn Sie es sortiert haben, wenn Sie denken, dass es eine nützliche Ergänzung zu den Tipps und Tricks Handbuch wäre, wäre ich wirklich daran interessiert Fügen Sie es in, wenn Sie glücklich, den Code freizugeben - Danke für das Lesen. Die Antwort ist ja war mein Freund Traurig versucht, den Code in die Kommentare hier verwirren das Blog und es versucht, die Link zu verknüpfen, anstatt es anzuzeigen - Aber Füge einfach einen Beispiellink pro w3schools Seite oben zu der Zeile hinzu, die den Text für deinen Hyperlink hinzufügt. Die einzige semi-tricky Sache, die ich tun musste, war, den Link mit Tags in einzelnen Sprachzeichen anstelle von doppelten Sprachzeichen zu setzen, da die URL benötigt wurde Um in doppelten sprachmarken zu sein. Das einzige wirkliche Problem dann, dass, um es zu erreichen, müssen Sie die Maus so weit bewegen, dass die Tooltip verschwindet. Natürlich kann dies durch mehrere Mittel gelöst werden, je nachdem, was für die Tooltip. So geeignet ist Ja Tolle Frage und eine tatsächliche Antwort. Snap Ich habe alle aufgeregt und didn t lesen Sie Ihre Post richtig Nun, da ich habe ich sehen, dass ich das gleiche Problem erlebe, dass Sie ich glaube, dass es eine Lösung, aber es beinhaltet, blockieren Maus Ereignisse So Ich frage mich, ob wir in einer Hühnerei-Situation sein könnten, wo wir eine Sache machen können, aber das hindert uns daran, einen anderen Hmm zu machen. Danke für die schnelle Antwort, die ich versucht habe, und ich habe eine Verzögerung in den Mausübergang, so dass ich Kann tatsächlich die Maus bewegen und auf die Tooltip klicken, bevor es verschwindet Der Text zeigt sich als Hyperlink in der Tooltip formatiert, aber es klickt auf es nicht alles, was die Zielseite nicht öffnet Ich vermisse etwas. Ja, ich glaube, wir re Beide fehlt etwas, das ich das Gefühl bekomme, dass wir durch die Verwendung eines Mausereignisses als Trigger die Mausaktion an die Tooltip binden, so dass, während der Hyperlink auftaucht, die Maus immer noch an das Ursprungsobjekt gebunden ist und ignoriert den Link Meine Erfahrung In diesem Bereich ist leider nicht fehlt Ich habe Angst Das ist meine beste Vermutung Wenn es sa muss für Ihre Visualisierung haben, fragen Sie eine Frage auf Stack Exchange Es gibt eine Menge Leute in diesem Forum mit einigen seltenen Fähigkeiten Sorry, ich war nicht in der Lage, mehr zu helfen. Gute Frage Das Geheimnis ist, den Teil des Textes zu verpacken, den du mit den Tags verknüpfen möchtest, die durch den Klang, den du schon gemacht hast, und dann, um die Zeiger-Ereignisse zu entfernen, kein Attribut aus dem Style-Bereich, sonst wird die Maus ignorieren Vorhandensein der Tooltipp Ich habe ein Beispiel für Ihre Perusal Again, gute Frage. Aktuell habe ich auch die Art und Weise, dass die Tool-Tipp erscheint und verschwindet, so dass es mehr von einer Chance, auf dem Bildschirm zu bleiben, wenn Sie die bewegen Maus aus dem Punkt auf dem Graph. Hey, Ich versuche, eine einfache Scatter-Plot mit Tooltip zu erstellen Meine CSV-Datei ist Land, x, y, ich möchte nur den Ländernamen x, y zu Pop-up, um jeden Datenpunkt bei der Maus zu beschriften Es gibt 200 gruppiert zusammen um einen Ursprung, also ist es ein wenig unordentlich zu verführerisch Einfaches Problem, auf der Suche nach einfacher Lösung. Hmm Gerade weg mein erster Gedanke ist, die Daten vor dem Zeichnen der Grafik zu massieren Es könnte dynamisch mit einem PHP-Skript gemacht werden, das geladen wurde Die csv, Massagen und Ausgänge als JSON oder csv wieder Nicht ganz einfach aber wenn du nicht vertraut mit php Ich habe das Gefühl, dass es eine Methode zur Verfügung innerhalb d3 s Array-Funktionen oder diese Seite kann helfen, aber ich m sorry zu sagen, dass Ich habe sie nicht ernst genommen Wenn du ein Beispiel zusammenstellen kannst, damit Leute eine nachfolgende Frage zum Stapelüberlauf kommentieren möchtest, kann man eine Antwort aussprechen. Gute Frage. TY für die Anweisungen Kann ich um Rat bitten Auf Mouseover, mein Code behält nicht die URL in Sicht beim Bewegen des Cursors auf die URL Die URL ist anklickbar, aber es verblasst beim Bewegen Ich ziehe den Cursor Ich habe verschiedene Dauern versucht, aber nicht immer die gleichen Ergebnisse in deinem Diagrammbeispiel gezeigt Hier ist ein Gist, der auch einen Link enthält Der Test Fall unten Wie sollte ich den Code aktualisieren, um die gleichen Ergebnisse in chart. Ahh Gute Frage und sorry für die unentschuldbare Verzögerung in der Antwort In Ihrem Fall und die eine über der URL verblasst, weil, wenn die Maus bewegt sich aus dem Objekt wird es Sofort versuchen, weg zu gehen Allerdings können Sie feststellen, dass es einen zusätzlichen Link in der Post, die ich in 201 hinzugefügt, die Links zu einem neuen Beitrag zeigt, wie man etwas sehr ähnlich, was Sie suchen suchen, überprüfen Sie, dass heraus und sehen, wie Sie zusteigen, einsteigen, vorwärtskommen.
No comments:
Post a Comment