So erstellen Sie ein Zeilendiagramm mit CSS

Die Eckpfeiler des Dashboards sind Zeilendiagramme, Balkendiagramme und Kreisdiagramme, die wesentliche Komponenten jedes Datenvisualisierungs -Toolkits sind. Natürlich können Sie JavaScript-Diagramm-Bibliotheken wie SVG oder Diagramm.JS oder ein komplexes Tool wie D3 verwenden, um diese Diagramme zu erstellen. Was ist jedoch, wenn Sie keine andere Bibliothek in eine Website laden möchten, die Sie bereits mit Leistungseinschränkungen haben?

Es gibt viele Artikel zum Erstellen von Balkendiagrammen, Balkendiagrammen und Kreisdiagrammen, die nur CSS verwenden. Wenn Sie jedoch nur ein grundlegendes Zeilendiagramm benötigen, haben Sie Pech. Während CSS mit Grenzen usw. "Zeichnen" von "Zeichnen" ist, gibt es keine klare Möglichkeit, von einem Punkt zum anderen auf den X- und Y -Koordinatenebenen zu zeichnen.

Es gibt in der Tat einen Weg! Wenn Sie nur ein einfaches Zeilendiagramm benötigen, müssen Sie keine großen JavaScript -Bibliotheken laden oder sogar SVG verwenden. Sie können alles, was Sie benötigen, mit nur einigen benutzerdefinierten Eigenschaften in CSS und HTML erstellen. Es ist jedoch wichtig, Sie daran zu erinnern, dass dies eine Trigonometrie beinhaltet. Wenn das dich nicht erschreckt, dann fangen wir an!

Hier sind unsere Ziele:

Beginnen Sie zu Studienbeginn

Wenn Sie von Hand ein Zeilendiagramm erstellen (z. B. Zeichnen von Zeilen auf Diagrammpapier), erstellen Sie zunächst Punkte und verbinden diese Punkte, um die Linien zu bilden. Wenn Sie den Prozess wie diesen aufschlüsseln, können Sie alle grundlegenden Zeilendiagramme in CSS neu erstellen.

Angenommen, wir haben eine Reihe von Daten, um Punkte auf X- und Y -Koordinatensystemen anzuzeigen, wobei sich der Wochentag auf der X -Achse befindet und der numerische Wert die Punkte auf der Y -Achse darstellt.

 <code>[ { value: 25, dimension: "Monday" }, { value: 60, dimension: "Tuesday" }, { value: 45, dimension: "Wednesday" }, { value: 50, dimension: "Thursday" }, { value: 40, dimension: "Friday" } ]</code>

Lassen Sie uns eine ungeordnete Liste erstellen, um unsere Datenpunkte zu speichern und einige Stile auf sie anzuwenden. Hier ist unser HTML:

<li>

<li>

<li>

<li>

<li>

Ein paar Punkte, um hier zu achten. Erstens wickeln wir alles in einen ein<ul></ul> Unter den Elementen ist dies ein guter Weg zu semantischem HTML, was darauf hinweist, dass dies in sich geschlossener Inhalt ist und bei Bedarf auch verwendet werden kann.<figcaption></figcaption> Die zusätzlichen Vorteile. Bitte beachten Sie, dass wir den Wert in einer benutzerdefinierten Eigenschaft namens data-value speichern, die an sich enthalten ist<div> Im<code><div> Befindet sich im Listenelement in der ungeordneten Liste. Warum wir separat verwenden<code><div> Anstatt die Klasse und Attribute in das Listenelement selbst einzulegen? Dies hilft uns später beim Zeichnen von Zeilen.<p> Beachten Sie schließlich, dass wir eine inline-benutzerdefinierte Eigenschaft für das übergeordnete Element haben, das wir nennen <code>--widget-size . Wir werden es in CSS verwenden, was so aussehen wird:

 <code>/* 父元素*/ .css-chart { /* 图表边框*/ border-bottom: 1px solid; border-left: 1px solid; /* 高度，最初在HTML中定义*/ height: var(--widget-size); /* 如果图表周围有其他项目，则留出一些空间*/ margin: 1em; /* 删除任何填充，以便我们在元素内部有尽可能多的空间可以使用*/ padding: 0; position: relative; /* 图表宽度，在HTML中定义*/ width: var(--widget-size); } /* 包含数据点的无序列表，没有列表样式和间距*/ .line-chart { list-style: none; margin: 0; padding: 0; } /* 图表上的每个点，每个都是一个带浅色边框的12px圆圈*/ .data-point { background-color: white; border: 2px solid lightblue; border-radius: 50%; height: 12px; position: absolute; width: 12px; }</code>

Die obigen HTML und CSS geben uns diesen weniger aufregenden Ausgangspunkt:

Datenpunkte rendern

Das sieht noch nicht wie ein Diagramm aus. Wir brauchen eine Möglichkeit, jeden Datenpunkt auf die jeweiligen X- und Y -Koordinaten in der zu generierten Tabelle zu zeichnen. In unserem CSS setzen wir .data-point -Klasse so, dass sie die absolute Positionierung verwenden und die feste Breite und Höhe des übergeordneten .css-chart Containers unter Verwendung benutzerdefinierter Eigenschaften festlegen. Wir können es verwenden, um unsere X- und Y -Positionen zu berechnen.

Unsere benutzerdefinierten Eigenschaften setzen die Diagrammhöhe auf 200px und in unserem Wert -Array beträgt das Maximum 60. Wenn wir diesen Datenpunkt auf den höchsten Punkt (200px) auf der Y -Achse des Diagramms festlegen, können wir das Verhältnis eines beliebigen Wertes im Datensatz zu 60 verwenden und die Y -Koordinaten aller Punkte multiplizieren. Daher hat unser Höchstwert von 60 einen Y -Wert, der so berechnet werden kann:

 <code>(60 / 60) * 200 = 200px</code>

Und unser kleinster Wert von 25 wird den Y -Wert auf die gleiche Weise berechnen:

 <code>(25 / 60) * 200 = 83.33333333333334px</code>

Es ist einfacher, die Y -Koordinaten jedes Datenpunkts zu erhalten. Wenn wir die Punkte gleichmäßig auf dem Diagramm verbreiten, können wir die Breite des Diagramms (200px) durch die Anzahl der Werte im Datenarray (5) teilen, um 40px zu erhalten. Dies bedeutet, dass die X -Koordinate des ersten Wertes 40px beträgt (Sie können die Ränder für die linke Achse hinterlassen, wenn wir möchten), und die X -Koordinate des letzten Werts wird 200px sein.

Sie haben gerade die Mathematikoperation durchgeführt! ?

Gehen wir nun zu jedem der Listenelemente<div> Fügen Sie Inline -Stil hinzu. Unser neues HTML wird wie dieses, wo der Inline -Stil die berechnete Position jedes Punktes enthält.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> </pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <li> <div data-value="25" style="bottom: 83.33333333333334px; left: 40px;"></div> </li> <li> <div data-value="60" style="bottom: 200px; left: 80px;"></div> </li> <li> <div data-value="45" style="bottom: 150px; left: 120px;"></div> </li> <li> <div data-value="50" style="bottom: 166.66666666666669pxpx; left: 160px;"></div> </li> <li> <div data-value="40" style="bottom: 133.33333333333331px; left: 200px;"></div> </li> <p>Hey, das sieht viel besser aus! Aber selbst wenn Sie sehen können, was das los ist, können Sie es immer noch nicht wirklich als Zeilendiagramm bezeichnen. Kein Problem. Wir müssen nur <em>ein bisschen</em> mehr Mathematik verwenden, um unser kontinuierliches Point -Spiel zu vervollständigen. Schauen Sie sich das Bild der Datenpunkte an, die wir erneut gemacht haben. Können Sie die Dreiecke sehen, die sie verbinden? Wenn nicht, hilft das nächste Bild möglicherweise:</p> <p> Warum ist das wichtig? Shhh, die Antwort kommt bald.</p> <h3 id="Rendering-Line-Segmente"> Rendering Line Segmente</h3> <p> Hast du das Dreieck jetzt gesehen? Sie sind mehr als nur gewöhnliche Dreiecke. Sie sind unsere besten Dreiecke (für unsere Zwecke), weil sie <strong>rechtwinklige Dreiecke</strong> sind! Wenn wir die Y -Koordinaten des Datenpunkts früher berechnen, berechnen wir auch die Länge einer Seite eines rechten Dreiecks ("Lauf", wenn Sie es als Leiter betrachten). Wenn wir die Differenz in der X -Koordinate von einem Punkt zu einem anderen berechnen, zeigt dies die Länge der anderen Seite des rechten Dreiecks (d. H. Der "Aufstieg" des Schritts). Mit diesen beiden Informationen können wir die Länge der magischen Abschrägung berechnen, was genau das ist, was wir auf den Bildschirm ziehen müssen, um unsere Punkte zu verbinden und ein echtes Zeilendiagramm zu erstellen.</p> <p> Schauen wir uns beispielsweise die zweiten und dritten Punkte der Tabelle an.</p> <p> Der Y-Wert des zweiten Datenpunkts beträgt 200 und der Y-Wert des dritten Datenpunkts beträgt 150, sodass die gegenüberliegende Seitenlänge des Dreiecks 200 minus 150 beträgt, d. H. 50. Es hat einen 40-Pixel-Nachbar (der Abstand, den wir zwischen jedem Punkt hinterlassen).</p> <p> Dies bedeutet, dass die Länge der Hypotenuse 50 Quadrate plus 40 Quadrate von Quadraten beträgt, d. H. 64.03124237432849.</p> <p> Erstellen wir einen weiteren in jedem Listenelement im Diagramm<code><div> Es wird als Hypotenuse des von diesem Punktes gezogenen Dreiecks wirken. Dann werden wir in diesem neuen sein<code><div> Legen Sie eine Inline -benutzerdefinierte Eigenschaft ein, auf der die Länge der Kräfte enthält.<p> Gleichzeitig müssen unsere Liniensegmente ihre korrekten X- und Y-Koordinaten kennen. Entfernen wir also den Inline-Stil aus <code>.data-point -Element, aber in seinem übergeordneten Element (<li> Fügen Sie CSS -benutzerdefinierte Attribute zu Element hinzu). Beziehen wir uns kreativ auf diese Eigenschaften --x und --y . Unsere Datenpunkte müssen die Kräfte (die Länge des Segments) nicht kennen, damit wir die kundenspezifische CSS-Eigenschaften für die Kegellänge direkt zum .line-segment hinzufügen können. Jetzt wird unsere HTML so aussehen:

Wir müssen das CSS aktualisieren, um die Datenpunkte mit diesen neuen benutzerdefinierten Eigenschaften zu lokalisieren und das neue .line-segment einzustellen, das wir dem Tag hinzufügen<div> Stil:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;.data-point { /* 和以前一样*/ bottom: var(--y); left: var(--x); } .line-segment { background-color: blue; bottom: var(--y); height: 3px; left: var(--x); position: absolute; width: calc(var(--hypotenuse) * 1px); }&lt;/code&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Ok, wir haben jetzt Segmente, aber das wollen wir überhaupt nicht. Um ein Zeilendiagramm mit normaler Funktion zu erhalten, müssen wir die Konvertierung anwenden. Aber zuerst, lasst uns einige Probleme beheben.</p> <p> Erstens stimmt unser Segment auf den Boden des Datenpunkts aus, aber wir möchten, dass der Ursprung des Segments in der Mitte des Datenpunktkreises liegt. Wir können dieses Problem lösen, indem <code>.data-point -Stil schnell ändern. Wir müssen ihre X- und Y -Positionen anpassen, um sowohl die Größe der Datenpunkte als auch ihre Grenzen und die Breite der Liniensegmente zu berücksichtigen.

 <code>.data-point { /* ... */ /* 数据点的半径为8px，线段的宽度为3px，  因此我们将差值分成两半，以使数据点位于线段原点的中心*/ bottom: calc(var(--y) - 6.5px); left: calc(var(--x) - 9.5px); }</code>

Zweitens werden unsere Liniensegmente an der Spitze des Datenpunkts und nicht dahinter gerendert. Wir können dieses Problem lösen, indem wir das Liniensegment an erster Stelle in HTML einsetzen:

Transformation anwenden, es ist großartig

Wir sind fast fertig. Wir müssen nur das letzte Stück Mathe machen. Insbesondere müssen wir ein Maß für den Winkel gegenüber der gegenüberliegenden Seite eines rechten Dreiecks finden und dann unsere Segmente um den gleichen Maße drehen.

Wie machen wir das? Trigonometrie! Möglicherweise erinnern Sie sich auch an kleine Erinnerungs -Tipps, wie Sie Sinus, Cosinus und Tangente berechnen können:

<li> SOH (Sinus = gegenüberliegende Seite/schräge Seite) <li> CAH (Cosinus = benachbarter/schräg) <li> Toa (Tangente = Gegenseite/Nahseite)

Sie können entweder verwenden, weil wir die Länge aller drei Seiten eines rechten Dreiecks kennen. Ich habe den Sinus ausgewählt, also lässt uns diese Gleichung zurück:

 <code>sin(x) = 对边/ 斜边</code>

Die Antwort auf diese Gleichung zeigt uns, wie Sie jedes Zeilensegment drehen, um sie mit dem nächsten Datenpunkt zu verbinden. Wir können dies schnell mit Math.asin(Opposite / Hypotenuse) in JavaScript tun. Aber es gibt die Antwort in Radians, also müssen wir das Ergebnis mit (180 / Math.PI) multiplizieren.

Unter Verwendung unseres zweiten Datenpunktbeispiels haben wir berechnet, dass die gepaarte Kantenlänge 50 beträgt und die abgeschrägte Kantenlänge 64.03124237432849 beträgt, sodass wir unsere Gleichung als:

 <code>sin(x) = 50 / 64.03124237432849 = 51.34019174590991</code>

Dies ist der Winkel, den wir suchen! Wir müssen die Gleichung für jeden Datenpunkt lösen und diesen Wert dann an unser .line-segment Element als CSS-benutzerdefinierte Eigenschaft übergeben. Dadurch wird unser HTML so aussehen:

Und hier können wir diese Eigenschaften in CSS anwenden:

 <code>.line-segment { /* ... */ transform: rotate(calc(var(--angle) * 1deg)); width: calc(var(--hypotenuse) * 1px); }</code>

Wenn wir es jetzt rendern, erhalten wir endlich das Zeilendiagramm, auf das wir nur auf CSS gewartet haben.

Wichtiger Hinweis: Wenn Sie den Wert der entgegengesetzten Kante berechnen ("steigen"), sollten Sie ihn als "Y -Position des aktuellen Datenpunkts" minus "y Position des nächsten Datenpunkts" berechnen. Wenn der Wert des nächsten Datenpunkts größer ist als der aktuelle Datenpunkt (höher im Diagramm), führt dies zu einem negativen Wert, der zu einer negativen Drehung führt. So stellen wir sicher, dass die Linien nach oben geneigt sind.

Wann kann solche Diagramme verwendet werden

Dieser Ansatz eignet sich perfekt für einfache statische Websites oder dynamische Websites, die serverseitige Inhalte verwenden. Natürlich kann es auch auf Websites mit dynamisch generierten Inhalten auf der Client -Seite verwendet werden. Anschließend kehren Sie auf der Client -Seite zurück. Der Codepen oben in diesem Artikel zeigt ein Beispiel dafür, wie der Client dieses Zeilendiagramm dynamisch generiert.

Die CSS calc() -Funktion ist sehr nützlich, kann aber für uns Sinus, Cosinus und Tangente nicht berechnen. Dies bedeutet, dass Sie Ihre Werte manuell berechnen oder eine schnelle Funktion (Client oder Serverseite) schreiben müssen, um die erforderlichen Werte (x, y, abschließend und Winkel) für unsere benutzerdefinierten CSS -Eigenschaften zu generieren.

Ich weiß, dass einige von Ihnen diesen Prozess durchlaufen haben und wenn Sie ein Skript benötigten, um den Wert zu berechnen, fühlte es sich an, als wäre er kein reines CSS - das ist fair. Der Schlüssel ist, dass das gesamte Diagrammrender in CSS erfolgt. Die Punkte und Linien, die sie verbinden, werden mithilfe von HTML -Elementen und CSS durchgeführt und arbeiten auch in statischen Rendering -Umgebungen, ohne dass JavaScript aktiviert ist, perfekt. Vielleicht noch wichtiger ist, dass Sie auf Ihrer Seite ein einfaches Zeilendiagramm machen können, ohne eine andere aufgeblähte Bibliothek herunterzuladen.

Mögliche Verbesserungen

Wie alles können wir immer etwas tun, um die Dinge auf die nächste Stufe zu bringen. In diesem Fall denke ich, dass dieser Ansatz durch drei Aspekte verbessert werden kann.

Reaktionsschnell

Die von mir skizzierte Methode verwendet eine feste Größe für Diagrammgrößen. Genau das möchten wir im reaktionsschnellen Design nicht sehen. Wenn wir JavaScript im Client ausführen können, können wir diese Einschränkung lösen. Setzen Sie eine CSS-benutzerdefinierte Eigenschaft (erinnern Sie sich an unsere Eigenschaft --widget-size ?), Anstatt die Diagrammgröße festzusagen?

Tooltips

Wir können .data-point ::before Data-Punkt hinzufügen, um die data-value anzuzeigen, die es enthält, wenn sie über einen Datenpunkt schweben. Dies ist eine schöne Ergänzung und hilft dabei, unser einfaches Diagramm in ein fertiges Produkt zu verwandeln.

Achse

Bitte beachten Sie, dass die Diagrammachsen nicht markiert sind. Wir können Beschriftungen auf den Achsen verteilen, die den höchsten Wert, Null und eine beliebige Anzahl von Punkten zwischen ihnen darstellen.

Ränder

Ich versuche, die Zahlen in diesem Artikel so einfach wie möglich zu gestalten, aber in der realen Welt möchten Sie vielleicht einige Margen in das Diagramm aufnehmen, damit sich die Datenpunkte nicht mit den extremen Kanten des Containers überschneiden. Dies kann einfach sein. Subtrahieren Sie einfach die Breite des Datenpunkts vom Bereich des Y-Koordinaten. Für X -Koordinaten können Sie auch die Breite des Datenpunkts von der Gesamtbreite des Diagramms in ähnlicher Weise abziehen, bevor Sie das Diagramm in gleiche Bereiche unterteilen.

Das war's! Wir haben uns nur eine Möglichkeit angesehen, in CSS aufzutreten, und wir brauchen nicht einmal Bibliotheken oder andere Abhängigkeiten von Drittanbietern, um es zum Laufen zu bringen. ?