Snelle en eenvoudige handleiding voor het maken van een diagram met één URL
Zou het niet geweldig zijn om een grafiek te maken met één URL? Dat kan nu dankzij de supereenvoudige interface van Image Charts. Grafieken maken met één URL, compleet met een breed spectrum aan functies, is nog nooit zo eenvoudig geweest. Hier zijn enkele eenvoudige stappen om u te laten zien hoe het werkt.
Wanneer je een POST- of URL GET-verzoek plaatst, levert de Image Chart API een grafiekafbeelding. De API kan allerlei soorten diagrammen tekenen, zoals radar-, staaf-, lijn-, taart- en andere diagrammen. De URL bevat belangrijke diagramkenmerken zoals labels, kleuren, grootte, diagramgegevens en andere factoren.
U kunt de eenvoudigst mogelijke grafiek maken door de grootte, gegevens en het grafiektype binnen de URL op te geven. Als u dat liever heeft, kunt u deze URL rechtstreeks in uw browser typen. Als u naar deze grafiek op uw webpagina wilt verwijzen, moet u gebruikmaken van de tag <img>.
URL-indeling
bepaalde elementen zijn opgenomen in de meeste grafieken. Grafiek-URL's delen het hieronder getoonde formaat.
https://image-charts.com/chart
?cht=<chart_type>
&chd=<chart_data>
&chs=<chart_size>
&...additional_parameters…
De tekenreeks https://image-charts.com/chart? is de sleutel tot alle grafieken, aangezien dit gedeelte aan het begin van elke grafiek-URL staat. Op deze tekenreeks volgen parameters die de visuals en de grafiekdata bepalen. De naam=waarde-parameterparen moeten worden gescheiden door een ampersand. Na het vraagteken in de bovenstaande reeks kun je de attributen in elke gewenste volgorde definiëren. Op zijn minst heb je deze parameters nodig om de grafiek-URL compleet te maken: chs (voor de grafiekgrootte), chd (voor de weer te geven data in de grafiek) en cht (grafiektype).
U kunt ook diverse andere parameters opgeven om uw grafiek extra betekenis te geven die hem tot leven brengt en belangrijke informatie aan anderen overbrengt in een handig en eenvoudig formaat. U kunt alle parameters opnemen die door het grafiektype worden ondersteund.
Een diepere blik onder de motorkap
Hier is een voorbeeld van een link die enkele van deze principes demonstreert.
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
Laten we alle onderdelen van deze URL stap voor stap bekijken, zodat je begrijpt hoe je hiermee belangrijke kenmerken van je grafiek kunt opgeven.
https://image-charts.com/chart?
Zoals eerder vermeld, is dit het beginstuk van de grafiek-URL dat voor alle grafieken hetzelfde is. Als u echter meerdere grafieken op verschillende pagina's wilt tonen, moet u mogelijk enkele wijzigingen in dit formaat aanbrengen. Deze geavanceerde techniek helpt u de laadsnelheid van grafieken en de paginaprestaties te verbeteren.
cht = p3
Dit fragment specificeert het grafiektype, in dit geval cirkeldiagram.
chs = 700 x 100
Dit is de grafiekgrootte, weergegeven in pixels. De breedte is 700 pixels, terwijl de hoogte 100 pixels is.
chd = t : 60 , 40
Dit zijn de grafiekgegevens. Dit formaat specificeert de gegevens in een eenvoudige tekstvorm. Er zijn ook andere formaten beschikbaar om gegevens handiger weer te geven.
ch1 = Hello | World
Deze labels duiden twee verschillende taartpunten aan.
chan
Het chan-attribuut animeert de weergave van de grafiek door deze als GIF weer te geven.
chf = ps
een lineair verloop voor elke taartpunt wordt in deze string opgegeven.
&
Het ampersandteken wordt gebruikt om de verschillende attributen van elkaar te scheiden.
U heeft nu een idee van de basis van het maken van grafieken met 1 URL op een zeer eenvoudige interface. U hoeft alleen de verschillende attributen in de URL op te geven. De Image Chart API rendert deze URL tot een grafiek die u helpt de gewenste informatie in de juiste vorm over te brengen.
Maak uw eigen grafieken met één URL
U moet weten hoe de attributen in de URL worden geschreven. Dit is een eenvoudige oefening die niet meer dan een paar minuten kost. U kunt uw eigen spiekbriefje maken dat laat zien hoe elk attribuut in de URL wordt opgegeven. Met oefening raakt u vertrouwder met attributen en hoeft u niet langer op het spiekbriefje te vertrouwen om te onthouden hoe grafiekattributen worden opgegeven.
Om te oefenen, kunt u beginnen met het aanpassen van deze URL en zien welk effect elke wijziging heeft op uw cirkeldiagram. Kopieer en plak eerst de image chart-URL in de adresbalk van uw browser.
U kunt een paar wijzigingen uitproberen om te zien hoe ze werken. Zo kunt u meer taartpunten maken door meer gegevenswaarden toe te voegen, waarbij u ervoor zorgt dat u er komma's tussen zet. U kunt ook de labels van alle taartpunten die u maakt opgeven. Zorg er voor elke waarde voor dat u het teken | tussen elk toevoegt. U kunt ook een grotere grafiek uitproberen door grotere pixelwaarden op te geven.
Image Charts heeft enkele van de grootste namen geholpen om proactiever met elkaar samen te werken dankzij de superintuïtieve Image Chart-interface. Zelfs complete beginners kunnen snel op weg met onze korte en eenvoudige tutorials in de development hub.
Hulp nodig bij het maken van diagrammen met een URL-adres? We helpen je hier graag bij, zoals we al voor vele anderen vóór jou hebben gedaan.
Klik hier voor meer informatie.
