Im neu auf D3 und versuchen, einen gleitenden Durchschnitt der vorherigen und nächsten Werte auf meine Daten zu tun, um es zu glätten. Derzeit habe ich es mit den 2 vorherigen Werten den aktuellen Wert. Es funktioniert aber 1) wie würde ich auch die nächsten Werte, und 2) was, wenn ich wollte die 15 vorherigen und 15 nächsten Werte verwenden (es wäre verrückt, 30 individuelle Vars für die Speicherung aller von ihnen haben) Im verwendet werden Traditionellen Javascript aber verloren, wie man die Daten auf diese Weise in D3. Hoffe jemand kann mich aufklären, danke. Oder nur die Datenanalyse Code hier: Eine Bollinger Bands Komponente für D3-Charts In meinem letzten Artikel (on-line-Annotation Komponenten für D3-Diagramme), schuf ich eine Komponente, die berechnet und zeigt einen gleitenden Durchschnitt. Wie versprochen, lege ich jetzt meine Aufmerksamkeit auf Bollinger Bands. Die Komponente Im gehen zu schaffen wird wie folgt aussehen: Wie im Vorfeld, Im gehen zu betrügen, indem sie das Diagramm Toms in seinem Artikel auf OHLC und Candlestick Komponenten entwickelt. Und Im die Schaffung der Komponente nach Mike Bostocks Convention. Was sind Bollinger Bands Froh, dass Sie gefragt. In Kürze werden Bollinger Bands auf Finanzplänen verwendet, um die Preisvolatilität anzugeben. Wie Sie aus dem obigen Diagramm ersehen können, bestehen sie aus drei Komponenten: Die oberen und unteren Bänder sind einige Standardabweichungen vom gleitenden Durchschnitt entfernt - und es ist zu beachten, dass es hier um eine bewegte Standardabweichung ging. Aus dieser Definition können wir sehen, dass wir zwei Parameter für unsere Berechnungen benötigen - die gleitende durchschnittliche Periode. Für die üblicherweise ein Wert von 20 verwendet wird, und die Anzahl der Standardabweichungen. Die typischerweise 2. Bollinger Bands Component Heres der komplette Code für die Bollinger Bands Komponente - Ill gehen durch es unten und erklären, was los ist. Das ist eine anständige Menge an Code, so können Sie an der Spitze, indem Sie die Eigenschaften Ive auf dieser Komponente definiert - youll sehen, dass Ive gebrochen sie in Abschnitte, so dass wir nicht einen monolithischen Block der Deklarationen am Anfang der Datei. Zuerst haben wir die X-und Y-Skalen, die die Komponente braucht, wenn seine Arbeit aus, wo die Dinge zu zeichnen. Als nächstes haben wir die Felder, die wir benötigen, um unsere Berechnungen durchzuführen - das Feld, das auf dem Datenmodell, dem gleitenden Durchschnittszeitraum und der Anzahl der Standardabweichungen verwendet werden soll. Beachten Sie, dass standardmäßig die gleitende durchschnittliche Periode bis 20 und die Anzahl der Standardabweichungen auf 2, die typischen Werte für diese Felder. Schließlich haben wir eine Reihe von Eigenschaften, die CSS-Klassen für die verschiedenen Teile der Komponente definieren. Dies bietet dem Benutzer eine Menge an Anpassbarkeit, wenn es um Styling kommt, aber wir setzen Standardwerte, so dass der Benutzer nicht diese Eigenschaften angeben müssen. In der Komponentenfunktion erzeugen wir eine d3.svg. area, um den Bereich zwischen den oberen und unteren Bändern und drei d3.svg. line-Objekten darzustellen, die das obere Band, das untere Band und die gleitende mittlere Linie darstellen und ihre X-Werte setzen passend. Im mit dem Bereich Element, weil das ist eine wirklich schöne, integrierte Möglichkeit, den Bereich zwischen zwei Zeilen zu zeigen. Der beste Teil ist, seine wirklich einfach zu bedienen - wo ein Zeilenelement Sie Ihren Y-Wert setzen muss, ein Flächenelement hat zwei Y-Werte - und Im sehr viel dafür, das Leben einfach für mich. Im nächsten Abschnitt definieren wir zwei Funktionen, um den gleitenden Durchschnitt und die sich bewegende Standardabweichung zu berechnen. Beachten Sie, dass Bollinger-Bänder die Populationsversion der Standardabweichungsformel verwenden. Innerhalb der Auswahl. Jeder Block ist, wo wir unsere schweren Heben - Einstellung der Y-Werte unserer verschiedenen SVG-Elemente. Wir deklarieren eine leere Variable, bollingerData. Dann füllen wir es mit Daten - es ist eine Karte von Datum zu avg (gleitender Durchschnitt) und sd (Standardabweichung) für jedes Datenelement. Wir tun dies einmal, das ist massiv effizienter als es wäre, wenn wir alle diese Berechnungen auf der Flucht getan haben Auf der anderen Seite waren diese Mittel zu tun, diese Berechnungen jedes Mal, wenn die Komponente neu gezeichnet wird, wenn wir maximal effizient wed Cache dies wollte Informationen, aber das würde auch verlangen, dass wir überprüfen, dass die Daten nicht jedes Mal geändert, wenn wir brauchen, um neu zu zeichnen, die seine eigenen Probleme bringt. Der Rest der selection. each Block ist langwierig aber ziemlich einfach - waren nur die Einstellung der Y-Werte für unsere Bereich und Linie-Elemente auf der Grundlage der Daten in der bollingerData Karte. Schließlich fügen wir die areaBands hinzu. Zeile. LineLower und lineAverage SVG-Elemente auf den Pfad. Beachten Sie, dass wir nicht setzen die gesamte Daten-Array auf diesen Elementen - Bollinger Bands in der Regel arent angezeigt, wenn theres nicht genügend Daten, um den gesamten gleitenden Durchschnitt zu berechnen, so beginnen wir bei Index movingAverage. Was die gewünschte Wirkung hat. Ive nicht gezeigt, die verschiedenen get / set Accessoren, weil theyre nicht besonders interessant, da theyre ziemlich viel alle gleich: Hinzufügen der Komponente in das Diagramm OK, das ist das heikle bisschen aus dem Weg, so jetzt nutzen können diese neue Bollinger Bands Komponente. Zuerst erstellen und konfigurieren wir unsere Komponente: Hier wurde nur gesagt, die Komponente über die X-und Y-Skalen, und sagen, dass die enge Eigenschaft auf dem Datenmodell zu verwenden. Die MovingAverage - und StandardDeviations-Eigenschaften sind optional (vor allem da wurden nur die Einstellung auf ihre Standardwerte hier, aber youd müssen sie, wenn Sie etwas Nicht-Standard wollte). Wir konnten auch eine der vier CSS-Eigenschaften setzen, die die Komponente enthüllt, aber ich habe gewählt, um sie hier wegzulassen und sie einfach mit ihren Standardwerten zu belassen. Mit dem getan, fügen wir die Komponente zum Diagramm hinzu: ProTip: Im, das diesen Code gerade vor den Code setzt, um die Diagrammdaten selbst anzuzeigen, damit die Bollinger Bänder im Hintergrund sind und die Diagrammdaten im Vordergrund. Styling Offensichtlich ist der letzte Schritt, um die verschiedenen Abschnitte der Komponente Stil. Ive gewählt, um die Bollinger Bands in Grau anzuzeigen, also Im mit einem hellgrau für den Bereich zwischen den oberen und unteren Bands und ein dunkleres Grau für die Bands selbst (Sie könnten stattdessen Transparenz, um den Bereich leichter). Als beiseite, beachten Sie, dass Ive Strich-Breite: 0 auf dem Gebiet gesetzt, so dass es keine Grenzen zeigt. Ich habe dies aus zwei Gründen getan. Erstens, zeichnen über die obere und untere Grenzen sowieso, und zweitens wollen wir nicht eine linke oder rechte Grenze gezeigt werden - versuchen Sie entfernen diese Zeile und youll sehen, was ich meine. Alles zusammen, das ist das Ergebnis: Verbesserungen Im ziemlich glücklich mit dieser Komponente - es funktioniert wirklich gut und seine relativ effizient, programmgesteuert. Es gibt noch einige Verbesserungen, die wir tun konnten. Wenn Sie den Wikipedia-Eintrag auf Bollinger-Bands lesen, sehen Sie, dass eine einfache gleitende Durchschnittsberechnung verwendet wurde, aber dass andere Arten von Berechnungen manchmal verwendet werden, könnten wir unsere Komponente erweitern, um dem Benutzer die Wahl zu ermöglichen, indem er eine zusätzliche Eigenschaft wie. movingAverageType ( Exponentiell). Fazit In diesem Artikel habe ich die gleitende durchschnittliche Komponente, die ich in meinem vorherigen Artikel entwickelt und verwendet es als Grundlage für eine Bollinger Bands Komponente. Die neue Komponente ist sehr einfach zu konfigurieren und zu stylen. In der Praxis wird der gleitende Durchschnitt eine gute Schätzung des Mittelwerts der Zeitreihe liefern, wenn der Mittelwert konstant ist oder sich langsam ändert. Im Fall eines konstanten Mittelwertes wird der grßte Wert von m die besten Schätzungen des zugrunde liegenden Mittels liefern. Ein längerer Beobachtungszeitraum wird die Effekte der Variabilität ausmachen. Der Zweck der Bereitstellung eines kleineren m ist es, die Prognose auf eine Änderung in dem zugrunde liegenden Prozess zu ermöglichen. Um zu veranschaulichen, schlagen wir einen Datensatz vor, der Änderungen im zugrundeliegenden Mittel der Zeitreihen enthält. Die Abbildung zeigt die Zeitreihen für die Darstellung zusammen mit der mittleren Nachfrage, aus der die Serie erzeugt wurde. Der Mittelwert beginnt als eine Konstante bei 10. Ab dem Zeitpunkt 21 erhöht er sich um eine Einheit in jeder Periode, bis er zum Zeitpunkt 30 den Wert von 20 erreicht. Dann wird er wieder konstant. Die Daten werden simuliert, indem dem Mittelwert ein zufälliges Rauschen aus einer Normalverteilung mit Nullmittelwert und Standardabweichung 3 hinzugefügt wird. Die Ergebnisse der Simulation werden auf die nächste ganze Zahl gerundet. Die Tabelle zeigt die simulierten Beobachtungen für das Beispiel. Wenn wir die Tabelle verwenden, müssen wir bedenken, dass zu einem gegebenen Zeitpunkt nur die letzten Daten bekannt sind. Die Schätzwerte des Modellparameters, für drei verschiedene Werte von m, werden zusammen mit dem Mittelwert der Zeitreihen in der folgenden Abbildung gezeigt. Die Abbildung zeigt die gleitende durchschnittliche Schätzung des Mittelwerts zu jedem Zeitpunkt und nicht die Prognose. Die Prognosen würden die gleitenden Durchschnittskurven nach Perioden nach rechts verschieben. Eine Schlussfolgerung ergibt sich unmittelbar aus der Figur. Für alle drei Schätzungen liegt der gleitende Durchschnitt hinter dem linearen Trend, wobei die Verzögerung mit m zunimmt. Die Verzögerung ist der Abstand zwischen dem Modell und der Schätzung in der Zeitdimension. Wegen der Verzögerung unterschätzt der gleitende Durchschnitt die Beobachtungen, während der Mittelwert zunimmt. Die Vorspannung des Schätzers ist die Differenz zu einer bestimmten Zeit im Mittelwert des Modells und dem Mittelwert, der durch den gleitenden Durchschnitt vorhergesagt wird. Die Vorspannung, wenn der Mittelwert zunimmt, ist negativ. Bei einem abnehmenden Mittelwert ist die Vorspannung positiv. Die Verzögerung in der Zeit und die Bias in der Schätzung eingeführt sind Funktionen von m. Je größer der Wert von m. Desto größer ist die Größe der Verzögerung und der Vorspannung. Für eine stetig wachsende Serie mit Trend a. Die Werte der Verzögerung und der Vorspannung des Schätzers des Mittelwerts sind in den folgenden Gleichungen gegeben. Die Beispielkurven stimmen nicht mit diesen Gleichungen überein, weil das Beispielmodell nicht kontinuierlich zunimmt, sondern als Konstante beginnt, sich in einen Trend ändert und dann wieder konstant wird. Auch die Beispielkurven sind vom Rauschen betroffen. Die gleitende Durchschnittsprognose der Perioden in die Zukunft wird durch die Verschiebung der Kurven nach rechts dargestellt. Die Verzögerung und die Vorspannung nehmen proportional zu. Die nachstehenden Gleichungen zeigen die Verzögerung und die Vorspannung von Prognoseperioden in die Zukunft im Vergleich zu den Modellparametern. Diese Formeln sind wiederum für eine Zeitreihe mit einem konstanten linearen Trend. Wir sollten dieses Ergebnis nicht überraschen. Der gleitende Durchschnittsschätzer basiert auf der Annahme eines konstanten Mittelwerts, und das Beispiel hat einen linearen Trend im Mittel während eines Teils des Studienzeitraums. Da Realzeitreihen den Annahmen eines Modells nur selten gehorchen, sollten wir auf solche Ergebnisse vorbereitet sein. Wir können auch aus der Figur schließen, dass die Variabilität des Rauschens den größten Effekt für kleinere m hat. Die Schätzung ist viel volatiler für den gleitenden Durchschnitt von 5 als der gleitende Durchschnitt von 20. Wir haben die widerstrebenden Wünsche, m zu erhöhen, um den Effekt der Variabilität aufgrund des Rauschens zu verringern und um m zu verringern, um die Prognose besser auf Veränderungen anzupassen Im Mittel. Der Fehler ist die Differenz zwischen den tatsächlichen Daten und dem prognostizierten Wert. Wenn die Zeitreihe wirklich ein konstanter Wert ist, ist der erwartete Wert des Fehlers Null und die Varianz des Fehlers besteht aus einem Term, der eine Funktion von und ein zweiter Term ist, der die Varianz des Rauschens ist. Der erste Term ist die Varianz des Mittelwertes mit einer Stichprobe von m Beobachtungen, vorausgesetzt, die Daten stammen aus einer Population mit einem konstanten Mittelwert. Dieser Begriff wird minimiert, indem man m so groß wie möglich macht. Ein großes m macht die Prognose auf eine Änderung der zugrunde liegenden Zeitreihen unempfänglich. Um die Prognose auf Veränderungen anzupassen, wollen wir m so klein wie möglich (1), aber dies erhöht die Fehlerabweichung. Praktische Voraussage erfordert einen Zwischenwert. Prognose mit Excel Das Prognose-Add-In implementiert die gleitenden Durchschnittsformeln. Das folgende Beispiel zeigt die Analyse des Add-In für die Beispieldaten in Spalte B. Die ersten 10 Beobachtungen sind mit -9 bis 0 indexiert. Im Vergleich zur obigen Tabelle werden die Periodenindizes um -10 verschoben. Die ersten zehn Beobachtungen liefern die Startwerte für die Schätzung und werden verwendet, um den gleitenden Durchschnitt für die Periode 0 zu berechnen. Die Spalte MA (10) zeigt die berechneten Bewegungsdurchschnitte. Der gleitende Mittelwert m ist in Zelle C3. Die Fore (1) Spalte (D) zeigt eine Prognose für einen Zeitraum in die Zukunft. Das Prognoseintervall ist in Zelle D3. Wenn das Prognoseintervall auf eine größere Zahl geändert wird, werden die Zahlen in der Spalte Vorwärts verschoben. Die Err (1) - Spalte (E) zeigt die Differenz zwischen der Beobachtung und der Prognose. Zum Beispiel ist die Beobachtung zum Zeitpunkt 1 6. Der prognostizierte Wert, der aus dem gleitenden Durchschnitt zum Zeitpunkt 0 gemacht wird, beträgt 11,1. Der Fehler ist dann -5.1. Die Standardabweichung und mittlere mittlere Abweichung (MAD) werden in den Zellen E6 und E7 berechnet. Berechnen Sie den gleitenden Durchschnitt in Excel In diesem kurzen Tutorial erfahren Sie, wie Sie schnell einen einfachen gleitenden Durchschnitt in Excel berechnen können, welche Funktionen verwendet werden, um sich zu bewegen Durchschnittlich für die letzten N Tage, Wochen, Monate oder Jahre, und wie man eine gleitende durchschnittliche Trendlinie zu einem Excel-Diagramm hinzufügen. In ein paar neuere Artikel haben wir einen genauen Blick auf das Berechnen des Durchschnitts in Excel genommen. Wenn Sie unseren Blog verfolgt haben, wissen Sie bereits, wie Sie einen normalen Durchschnitt berechnen und welche Funktionen verwenden, um einen gewichteten Durchschnitt zu finden. In der heutigen Tutorial, werden wir diskutieren zwei grundlegende Techniken, um gleitende Durchschnitt in Excel zu berechnen. Was ist gleitender Durchschnitt Generell kann der gleitende Durchschnitt (auch als gleitender Durchschnitt, laufender Durchschnitt oder beweglicher Mittelwert) als eine Reihe von Durchschnittswerten für verschiedene Teilmengen desselben Datensatzes definiert werden. Es wird häufig in der Statistik verwendet, saisonbereinigte Wirtschafts-und Wettervorhersage zugrunde liegenden Trends zu verstehen. Im Aktienhandel ist der gleitende Durchschnitt ein Indikator, der den Durchschnittswert eines Wertpapiers über einen bestimmten Zeitraum darstellt. Im Geschäft, seine eine gängige Praxis, um einen gleitenden Durchschnitt der Verkäufe für die letzten 3 Monate zu berechnen, um den letzten Trend zu bestimmen. Zum Beispiel kann der gleitende Durchschnitt der dreimonatigen Temperaturen berechnet werden, indem man den Durchschnitt der Temperaturen von Januar bis März, dann den Durchschnitt der Temperaturen von Februar bis April, dann von März bis Mai und so weiter. Es gibt verschiedene Arten von gleitenden Durchschnitt wie einfache (auch als Arithmetik), exponentiell, variabel, dreieckig und gewichtet. In diesem Tutorial werden wir in den am häufigsten verwendeten einfachen gleitenden Durchschnitt suchen. Berechnen einfachen gleitenden Durchschnitt in Excel Insgesamt gibt es zwei Möglichkeiten, um einen einfachen gleitenden Durchschnitt in Excel - mit Formeln und trendline Optionen. Die folgenden Beispiele zeigen beide Techniken. Beispiel 1. Gleitender Durchschnitt für einen bestimmten Zeitraum berechnen Ein einfacher gleitender Durchschnitt kann mit der Funktion AVERAGE im Handumdrehen berechnet werden. Angenommen, Sie haben eine Liste der durchschnittlichen monatlichen Temperaturen in Spalte B, und Sie möchten einen gleitenden Durchschnitt für 3 Monate zu finden (wie in der Abbildung oben). Schreiben Sie eine übliche AVERAGE-Formel für die ersten 3 Werte und geben Sie sie in die Zeile ein, die dem dritten Wert von oben entspricht (Zelle C4 in diesem Beispiel), und kopieren Sie die Formel dann auf andere Zellen in der Spalte: Sie können die Spalte mit einer absoluten Referenz (wie B2), wenn Sie möchten, aber achten Sie darauf, relative Zeilenreferenzen (ohne das Zeichen) zu verwenden, so dass die Formel richtig für andere Zellen passt. Denken Sie daran, dass ein Durchschnitt durch Addition von Werten und dann durch Addition der Summe durch die Anzahl der zu mittelnden Werte berechnet wird, können Sie das Ergebnis anhand der SUM-Formel verifizieren: Beispiel 2. Gleitender Durchschnitt für die letzten N Tage / Wochen / Monate / Jahre in einer Spalte Angenommen, Sie haben eine Liste von Daten, zB Verkauf Zahlen oder Aktienkurse, und Sie wollen wissen, den Durchschnitt der letzten 3 Monate zu einem beliebigen Zeitpunkt. Dazu benötigen Sie eine Formel, die den Durchschnitt neu berechnen wird, sobald Sie einen Wert für den nächsten Monat eingeben. Was Excel-Funktion ist in der Lage, dies zu tun Die gute alte AVERAGE in Kombination mit OFFSET und COUNT. DURCHSCHNITT (OFFSET (erste Zelle COUNT (Gesamtbereich) - N, 0, N, 1)) wobei N die Anzahl der letzten Tage / Wochen / Monate / Jahre ist. Nicht sicher, wie Sie diese gleitende Durchschnittsformel in Ihren Excel-Arbeitsblättern verwenden Das folgende Beispiel wird die Dinge klarer machen. Angenommen, die Werte zum Mittelwert in Spalte B beginnen in Zeile 2, die Formel wäre wie folgt: Und jetzt wollen wir versuchen zu verstehen, was diese Excel-gleitende durchschnittliche Formel tatsächlich tun. Die COUNT-Funktion COUNT (B2: B100) zählt, wie viele Werte bereits in Spalte B eingegeben sind. Wir zählen in B2, da Zeile 1 der Spaltenkopf ist. Die OFFSET-Funktion nimmt die Zelle B2 (das erste Argument) als Ausgangspunkt an und verschiebt die Zählung (den durch die COUNT-Funktion zurückgegebenen Wert) durch Verschieben von 3 Zeilen nach oben (-3 im zweiten Argument). Als Ergebnis gibt er die Summe der Werte in einem Bereich zurück, der aus 3 Zeilen (3 im 4. Argument) und 1 Spalte (1 im letzten Argument) besteht, was die letzten 3 Monate ist, die wir wollen. Schließlich wird die zurückgegebene Summe an die Funktion AVERAGE übergeben, um den gleitenden Durchschnitt zu berechnen. Spitze. Wenn Sie mit kontinuierlich aktualisierbaren Arbeitsblättern arbeiten, in denen neue Zeilen zukünftig wahrscheinlich hinzugefügt werden sollen, müssen Sie eine ausreichende Anzahl von Zeilen an die COUNT-Funktion liefern, um potenzielle neue Einträge zu berücksichtigen. Es ist kein Problem, wenn Sie mehr Zeilen als tatsächlich benötigt, solange Sie die erste Zelle rechts, die COUNT-Funktion werden alle leeren Zeilen sowieso verwerfen gehören. Wie Sie wahrscheinlich bemerkt haben, enthält die Tabelle in diesem Beispiel Daten für nur 12 Monate, und doch wird der Bereich B2: B100 an COUN geliefert, nur um auf der Speicherseite zu sein :) Beispiel 3. Gleitender Durchschnitt für die letzten N Werte in Eine Zeile Wenn Sie einen gleitenden Durchschnitt für die letzten N Tage, Monate, Jahre usw. in der gleichen Zeile berechnen wollen, können Sie die Offset-Formel auf diese Weise anpassen: Angenommen, B2 ist die erste Zahl in der Zeile und Sie wollen Um die letzten 3 Zahlen im Durchschnitt einzuschließen, nimmt die Formel die folgende Form an: Erstellen eines Excel-gleitenden Durchschnittsdiagramms Wenn Sie bereits ein Diagramm für Ihre Daten erstellt haben, ist das Hinzufügen einer gleitenden durchschnittlichen Trendlinie für dieses Diagramm eine Angelegenheit von Sekunden. Dazu verwenden wir die Excel Trendline-Funktion und die detaillierten Schritte folgen unten. Für dieses Beispiel hat Ive ein 2-D Säulendiagramm (Insert tab gt Charts group) für unsere Verkaufsdaten erstellt: Und nun wollen wir den gleitenden Durchschnitt für 3 Monate visualisieren. In Excel 2010 und Excel 2007, gehen Sie zu Layout gt Trendline gt Weitere Trendline-Optionen. Spitze. Wenn Sie die Details wie das gleitende Durchschnittsintervall oder die Namen nicht angeben müssen, können Sie auf Design gt klicken. Diagramm-Element hinzufügen gt Trendline gt Moving Average für das sofortige Ergebnis. Das Fenster "Format Trendline" wird auf der rechten Seite des Arbeitsblatts in Excel 2013 geöffnet und das entsprechende Dialogfeld wird in Excel 2010 und 2007 angezeigt. Um Ihren Chat zu verfeinern, können Sie auf die Registerkarte Fill amp Line oder Effects wechseln Das Format Trendline-Fenster und spielen mit verschiedenen Optionen wie Linientyp, Farbe, Breite, etc. Für eine leistungsstarke Datenanalyse, möchten Sie vielleicht ein paar gleitende durchschnittliche Trendlinien mit unterschiedlichen Zeitintervallen hinzufügen, um zu sehen, wie sich der Trend entwickelt. Der folgende Screenshot zeigt die 2 Monate (grün) und 3 Monate (brickrot) gleitenden Durchschnitt Trendlinien: Nun, das ist alles über die Berechnung der gleitenden Durchschnitt in Excel. Das Beispielarbeitsblatt mit den gleitenden Durchschnittsformeln und der Trendlinie ist zum Download verfügbar - Moving Average Kalkulationstabelle. Ich danke Ihnen für das Lesen und freuen uns auf Sie nächste Woche Sie könnten auch interessiert sein an: Erstellen einer Yahoo Finance Chart mit D3 und d3fc Die meisten Charting-Bibliotheken sind Monolithen. Je mehr Features sie unterstützen, desto unhandlicher ihre APIs zu werden. Mit dem d3fc-Projekt erforschen wir einen alternativen Ansatz, der Diagramme aus einer Reihe kleiner Komponenten mit Hilfe der D3-Bibliothek erstellt. In diesem Beitrag möchte ich die Macht der beiden d3fc und D3 durch die Re-Erstellung der ziemlich komplexen Yahoo Finanzen Diagramm zu demonstrieren. Das Erstellen einer pixelgenauen Erholung dieses Diagramms mit einer monolithischen Chartbibliothek wäre eine große Herausforderung (wenn nicht sogar unmöglich). Mit d3fc ist es überraschend einfach Dieser Beitrag nimmt einen Schritt-für-Schritt-Ansatz zu zeigen, wie die Yahoo-Finance-Chart kann getreu wiederhergestellt werden. Rendering ein einfaches Diagramm d3fc und seine Abhängigkeit sind über npm wie in den Installationsanweisungen. D3fc erstellt Diagramme mit SVG, so dass der erste Schritt ist, um ein SVG-Element auf der Seite hinzuzufügen: Die Yahoo Finance-Daten stehen als CSV-Daten über eine nicht unterstützte, aber weit verbreitet API. D3 hat eine Reihe von Utility-Funktionen zum Abrufen und Analysieren von Daten, einschließlich CSV. Der folgende Code führt eine XHR-Anfrage über d3.csv aus: Sobald die Daten abgerufen und analysiert wurden, wird die folgende renderChart-Funktion aufgerufen: Wenn man diesen Code im Detail betrachtet, konstruiert der erste Schritt eine fc. chart. linearTimeSeries. Dies ist eine relativ hohe d3fc-Komponente, die ein Diagramm mit einer horizontalen Datumsachse und einer vertikalen numerischen Achse wiedergibt. Seine Hauptaufgabe ist, ein SVG-Layout zu konstruieren, das die verschiedenen Teile des Diagramms (Achsen, Plot-Bereich, etc.) beherbergt. Die Funktion fc. util. extent wird verwendet, um die Extents (max und min Werte) verschiedener Eigenschaften der Daten zu berechnen. Als nächstes wird eine d3fc-Bereichsreihe erstellt, wobei die yValue-Zugriffseigenschaft dazu verwendet wird, den offenen Wert von jedem Datenpunkt auszuwählen. Der Standard-xValue-Accessor für die meisten Komponenten erwartet eine Datumseigenschaft, was in diesem Beispiel der Fall ist. Die Diagramme plotArea werden auf die Bereichsreihe eingestellt, so dass die Bereichsreihe auf die richtige Skala angewendet wird. Schließlich wird das SVG-Element mit d3.select ausgewählt. Werden die Daten gebunden, und die Diagrammkomponente ruft die Auswahl auf. Wenn Sie bereits einige Erfahrung mit D3 hatten, sollte dieses Konstruktionsmuster Ihnen ziemlich vertraut sein. Die d3fc-Komponenten folgen dem D3-Komponentenmuster. Hinzufügen von Gitternetzlinien und - zeilen In anderen Diagrammbibliotheken kann es sich um Zeilen-, Punkt - und Bereichsangaben als einzelner Serientyp handeln, wobei d3fc einen Mikrokomponentenansatz bevorzugt, der jeweils getrennt ist. Für diese Tabelle sind ein Bereich und eine Zeilenserie erforderlich: Gitternetzlinien sind eine weitere d3fc-Komponente: Der Diagrammplotbereich akzeptiert nur eine einzelne Serie, jedoch können mehrere Serieninstanzen (die x - und y-Skalen haben) unter Verwendung einer Mehrfachserie gruppiert werden Multi-Serie erzeugt ein g enthaltendes Element für jede der gelieferten Reihen, setzt ihre x - und y-Skalen und propagiert die Daten zu jedem. Mit Gitternetz, Bereich und Linie Serie hinzugefügt, und einige kleinere Tweaks auf die Anzahl der Zecken, sieht das Diagramm wie die folgenden: Styling d3fc Komponenten sind über CSS gestylt. Der einfachste Weg, um die geeigneten CSS-Selektoren für das Styling einer Komponente zu bestimmen, ist, nur die gerenderte Ausgabe zu betrachten. Das Yahoo-Diagramm hat einen subtilen Farbverlauf, der auf die Bereichsreihe angewendet wird. SVG-Gradienten sind (eher ungeschickt) in SVG wie folgt definiert: Beachten Sie, dass das Aufrufen der linearTimeSeries-Komponente auf dem obigen SVG das defs-Element nicht zerstört. D3fc-Komponenten werden so geschrieben, dass sie ihre eigenen Elemente über die CSS-Klasse identifizieren, so dass diese Elemente neben anderen in demselben Container leben können. Mit einigen einfachen CSS die Gradienten-und Linien-Stile können auf das Diagramm angewendet werden. Leider ist es nicht möglich, D3-Achsenbeschriftungen über CSS neu zu positionieren. Der einzige Weg, dies zu erreichen, besteht darin, dass die Achse dann eine D3-Auswahl verwendet, um die Etiketten zu lokalisieren und sie dann direkt zu verschieben: Dies ist nicht ideal, da der obige Code jedes Mal durchgeführt wird, wenn die Diagramme gerendert werden, unabhängig davon, ob die Achsen Updates benötigen . Mit diesem Styling sieht das Diagramm wie folgt aus: Das Hinzufügen eines gleitenden Durchschnitts d3fc hat eine Reihe von finanziellen Indikatoren, diese Algorithmen werden direkt auf die Diagrammdaten angewendet, wobei die Standardimplementierung neue Eigenschaften zu den Daten hinzufügt Bereitstellung einer benutzerdefinierten Merge-Funktion). Im Folgenden wird ein exponentieller gleitender Durchschnitt (EMA) basierend auf dem geschlossenen Preis berechnet: Um einen Indikator zu rendern, ist ein geeigneter Renderer erforderlich. Eine EMA berechnet für jeden Datenpunkt einen einzelnen Wert und wird über eine reguläre Zeilenserie gerendert, aber für komplexere Indikatoren (MACD, Bollinger) liefert d3fc dedizierte Renderer. Der Code oben zeigt das Dekor-Muster, das auf den meisten d3fc Komponenten gefunden werden kann. Decorate wird eine Auswahl übergeben, die als Ergebnis der Komponenten-Datenverknüpfung erstellt wird. Wenn Sie nicht vertraut sind mit diesem Konzept, Id empfehlen Mikes Thinking With Joins Artikel. In dem obigen Code ist die zur Dekoration gelieferte Auswahl die Aktualisierungsauswahl für das Komponenten-Root-g-Element. Die Eingabe-Auswahl wird verwendet, um eine Ema-Klasse zu diesem Element hinzuzufügen. Beachten Sie, dass mit der Enter-Selektion dies nur einmal durchgeführt wird, an der Stelle, an der das Element zuerst gebaut wird. HINWEIS: Diese Eingabeauswahl ist nicht die gleiche wie diejenige, die über eine Standarddatenverbindung erhalten wird. In diesem Fall hat die Eingabeauswahl bereits ein Element angehängt. Youll sehen dekorieren an einigen Stellen in diesem Beispiel verwendet werden, ist es ein leistungsfähiges und vielseitiges Muster. Wenn die EMA-Serie den Multi-Serien hinzugefügt wird, sieht das Diagramm wie folgt aus: Hinzufügen eines Volumendiagramms Das Yahoo Finance Chart zeigt das gehandelte Volumen in der unteren Hälfte des Plot-Bereichs, dies ist ein ziemlich normales Chart-Layout. Um das Volumendiagramm wiederzugeben, ist eine sekundäre y-Skala erforderlich, wobei die Domäne auf dem Datenvolumen basiert und der Bereich auf die Hälfte der Höhe des Diagrammbereichs eingestellt ist. Der lineareTimeSeries hat nicht eine Volumenskala als Teil seines Layouts, das ist etwas, das manuell hinzugefügt werden muss. Die lineareTimeSeries verwendet die Layout-Komponente d3fc, die das Flexbox-Layout implementiert hat, so dass es sinnvoll ist, auch hierfür einen Container für die Volume-Serie zu erstellen. Im Folgenden wird ein g-Element erstellt, das als Container für die Volume-Reihe dient: Anstatt ein g-Element direkt in den Container anzuhängen, wird es innerhalb einer Datenverknüpfungsselektion angefügt. Dadurch wird sichergestellt, dass nur ein Element hinzugefügt wird, unabhängig davon, wie oft die renderChart-Funktion aufgerufen wird. Das obige Beispiel ist ein relativ einfaches Layout, für ein komplexeres Beispiel Pop über die d3fc Website. Eine Volumenskala wird mit einer Domäne basierend auf den Eingabedaten und einem Bereich auf der Basis der Höhe des Volumencontainers aufgebaut: Schließlich wird eine Volumenserie konstruiert und gerendert: Daraus ergibt sich folgendes Diagramm: Färben der Volumenbalken Der letzte Schritt in Dieses Beispiel ist es, jeden Balken des Volumendiagramms auf der Grundlage davon zu färben, ob der Preis innerhalb der durch den gegebenen Balken dargestellten Periode gestiegen oder gefallen ist. Auch hier wird wieder dekoriert: Wenn man sich die SVG-Elemente ansieht, die für eine Balkenreihe konstruiert sind, werden Sie feststellen, dass jeder Balken aus einem g-Element besteht, das einen einzigen Pfad enthält. Die obige Dekorfunktion verwendet die Eingabe-Auswahl, die diese g-Elemente enthält, wählt den verschachtelten Pfad aus und wendet eine geeignete Strichfarbe auf der Grundlage der Richtung der Preisbewegung an. Das Diagramm fängt jetzt an, ganz wie das Yahoo Finanzdiagramm zu schauen: Schlussfolgerungen In diesem Blogpfosten haben Sie gesehen, wie d3fc Bestandteile zusammengebaut werden können, zusammengebaut und verziert werden, um ein verhältnismäßig kompliziertes finanzielles Diagramm wieder herzustellen, obgleich es nicht gerade noch vollständig ist. In meinem nächsten Beitrag Ill zeigen, wie d3fc Legende und Fadenkreuz Komponenten hinzugefügt werden können, um einige Interaktivität bieten, und wie man einen benutzerdefinierten Diskontinuität Anbieter erstellen Bis dann, wenn Sie irgendwelche Fragen über d3fc oder dieses Beispiel haben, kontaktieren Sie uns entweder über das Kommentarfeld Unten oder über das GitHub-Projekt. Grüße, Colin E. Ich bin Technologie-Direktor bei Scott Logic und bin ein produktiver technischer Autor, Blogger und Referent auf einer Reihe von Technologien. Für eine Reihe von Jahren arbeitete ich mit dem Microsoft Stapel von Technologien, einschließlich WPF, WCF, Silverlight und Windows Phone. Vor kurzem habe ich diversifiziert, um HTML5, JavaScript und iOS-Entwicklung enthalten.
No comments:
Post a Comment