Schnelle und einfache Anleitung zum Erstellen eines Diagramms mit einer einzigen URL
Wäre es nicht großartig, ein Diagramm mit einer einzigen URL zu erstellen? Dank der kinderleichten Oberfläche von Image Charts ist das jetzt möglich. Diagramme mit einer einzigen URL zu erstellen, komplett mit einem breiten Spektrum an Funktionen, war noch nie so einfach. Hier sind einige einfache Schritte, die Ihnen zeigen, wie es geht.
Wenn Sie eine POST- oder URL-GET-Anfrage stellen, liefert die Image Chart API ein Diagrammbild. Der API kann alle Arten von Diagrammen zeichnen, wie Radar-, Balken-, Linien-, Kreisdiagramme und weitere. Die URL enthält wichtige Diagrammattribute wie Beschriftungen, Farben, Größe, Diagrammdaten und andere Faktoren.
Sie können das einfachstmögliche Diagramm erstellen, indem Sie die Größe, die Daten und den Diagrammtyp innerhalb der URL angeben. Wenn Sie möchten, können Sie diese URL direkt in Ihren Browser eingeben. Wenn Sie auf Ihrer Webseite auf dieses Diagramm verweisen möchten, müssen Sie die Tag <img> verwenden.
URL-Format
bestimmte Elemente sind in den meisten Diagrammen enthalten. Diagramm-URLs teilen sich das unten gezeigte Format.
https://image-charts.com/chart
?cht=<chart_type>
&chd=<chart_data>
&chs=<chart_size>
&...additional_parameters…
Die Zeichenfolge https://image-charts.com/chart? ist der Schlüssel zu allen Diagrammen, da sie am Anfang jeder Diagramm-URL steht. Auf diese Zeichenfolge folgen Parameter, die die Optik und die Diagrammdaten festlegen. Die Name=Wert-Parameterpaare müssen durch ein Und-Zeichen getrennt werden. Nach dem Fragezeichen in der obigen Zeichenfolge können Sie die Attribute in beliebiger Reihenfolge festlegen. Mindestens benötigen Sie folgende Parameter, um die Diagramm-URL zu vervollständigen: chs (für die Diagrammgröße), chd (für die im Diagramm anzuzeigenden Daten) und cht (Diagrammtyp).
Sie können auch mehrere weitere Parameter angeben, um Ihrem Diagramm zusätzliche Bedeutung zu verleihen, die es zum Leben erwecken und anderen in einem praktischen und einfachen Format wichtige Informationen vermitteln. Sie können alle Parameter einbeziehen, die vom Diagrammtyp unterstützt werden.
Ein tieferer Blick unter die Haube
Hier ist ein Beispiel für einen Link, der einige dieser Prinzipien veranschaulicht.
https://image-charts.com/chart
?cht=p3
&chs=700x100
&chd=t:60,40
&chl=Hello|World
&chan
&chf=ps0-0,lg,45,ffeb3b,0.2,f44336,1|ps0-1,lg,45,8bc34a,0.2,009688,1
Lassen Sie uns alle Teile dieser URL Schritt für Schritt untersuchen, damit Sie verstehen, wie damit wichtige Attribute Ihres Diagramms festgelegt werden.
https://image-charts.com/chart?
Wie bereits erwähnt, ist dies der Anfangsteil der Diagramm-URL, der bei allen gleich ist. Wenn Sie jedoch mehrere Diagramme auf verschiedenen Seiten anzeigen möchten, müssen Sie möglicherweise einige Änderungen an diesem Format vornehmen. Diese fortgeschrittene Technik hilft Ihnen, die Ladegeschwindigkeit der Diagramme und die Seitenleistung zu verbessern.
cht = p3
Dieses Fragment gibt den Diagrammtyp an, in diesem Fall Kreisdiagramm.
chs = 700 x 100
Dies ist die Diagrammgröße, angegeben in Pixeln. Die Breite beträgt 700 Pixel, während die Höhe 100 Pixel beträgt.
chd = t : 60 , 40
Dies sind die Diagrammdaten. Dieses Format gibt die Daten in einfacher Textform an. Es gibt auch andere Formate, um Daten bequemer anzuzeigen.
ch1 = Hello | World
Diese Beschriftungen kennzeichnen zwei verschiedene Segmente der Torte.
chan
Das Attribut chan animiert die Diagrammdarstellung, indem es sie als GIF rendert.
chf = ps
ein linearer Verlauf für jedes Tortenstück wird in dieser Zeichenkette angegeben.
&
Das Und-Zeichen (Ampersand) wird verwendet, um die verschiedenen Attribute voneinander zu trennen.
Sie haben nun eine Vorstellung von den Grundlagen des Erstellens von Diagrammen mit 1 URL auf einer sehr einfachen Oberfläche. Sie müssen lediglich die verschiedenen Attribute in der URL angeben. Die Image Chart API wandelt diese URL in ein Diagramm um, das Ihnen hilft, die gewünschte Information in der richtigen Form zu vermitteln.
Erstellen Sie Ihre eigenen Diagramme mit nur einer URL
Sie müssen wissen, wie die Attribute in der URL geschrieben werden. Das ist eine einfache Übung, die nicht länger als ein paar Minuten dauert. Sie können Ihren eigenen Spickzettel erstellen, der zeigt, wie jedes Attribut in der URL angegeben wird. Mit etwas Übung werden Sie sicherer im Umgang mit Attributen und müssen sich nicht mehr auf den Spickzettel verlassen, um sich zu merken, wie Diagrammattribute angegeben werden.
Zum Üben können Sie mit dieser URL experimentieren und sehen, welche Auswirkung jede Änderung auf Ihr Kreisdiagramm hat. Kopieren Sie zunächst die Image-Chart-URL und fügen Sie sie in die Adressleiste Ihres Browsers ein.
Sie können ein paar Änderungen ausprobieren, um zu sehen, wie sie wirken. Zum Beispiel können Sie mehr Segmente erstellen, indem Sie weitere Datenwerte hinzufügen und darauf achten, Kommas zwischen ihnen zu setzen. Sie können auch die Beschriftungen aller von Ihnen erstellten Segmente angeben. Achten Sie bei jedem Wert darauf, das Zeichen | zwischen jedem hinzuzufügen. Sie können auch ein größeres Diagramm ausprobieren, indem Sie größere Pixelwerte angeben.
Image Charts hat einigen der größten Namen geholfen, dank der super einfachen Image-Charts-Oberfläche proaktiver zusammenzuarbeiten. Selbst absolute Einsteiger kommen mit unseren kurzen und einfachen Tutorials im Development Hub schnell zurecht.
Brauchen Sie Hilfe bei der Erstellung von Diagrammen über eine URL-Adresse? Wir helfen Ihnen nur zu gerne, so wie wir es schon für viele andere vor Ihnen getan haben.
Klicken Sie hier um mehr zu erfahren.
