Uw bestandsstructuur zou er als volgt uit moeten zien:

├── 404.html ├── crossdomain.xml ├── css │ ├── main.css │ └── normalize.css ├── favicon.ico ├── img ├── index.html ├── js │ ├── main.js │ ├── plugins.js │ └── verkoper │ ├── jquery-1.10.1.min.js │ └── modernizr-2.6.2.min.js └── robots. tekst

Notitie: dit omvat niet enkele van de bestanden in H5BP die we niet zullen gebruiken.

Kleurenpalet

Voordat we beginnen met het coderen van de site, laten we beginnen met het instellen van een kleurenpalet dat we in het hele ontwerp gebruiken. Door dit te doen, kunnen we een toekomstige "stijlgids" van soorten vaststellen; dit is een gangbare praktijk voor vrijwel elk ontwerp.

Als u het dashboard bouwt met een bepaald merk in gedachten, begin dan met het gebruik van de kleuren van het merk. Vandaag zullen we twee hoofdkleuren en twee nevenkleuren definiëren. We zullen ook tinten of vervaagde versies van deze kleuren gebruiken.

• donkerblauw: # 637b85
• groen: # 2c9c69
• geel: # dbba34
• rood: # c62f29

We zullen ook een lichtere tint van het donkerblauwe gebruiken, # d0dde3. Ten slotte zullen we grijswaardenkleuren gebruiken.

ChartJS-basis

ChartJS gebruikt het canvaselement. Het canvaselement biedt een JavaScript-interface om pixels naar een bepaald rechthoekgebied te tekenen. Het wordt vaak vergeleken met SVG, dat een DOM-knooppuntgebaseerde oplossing biedt voor het maken van vectorafbeeldingen in de browser. Pixels die naar het canvaselement worden getekend, worden echter niet in het geheugen bewaard en reageren daarom niet op JavaScript-gebeurtenissen.

Maar genoeg met de technische praat - hoe kunnen we snel aan de slag met ChartJS?

Gelukkig heeft de startpagina van ChartJS tal van voorbeelden om ons snel van start te laten gaan. Het basispatroon is om het canvaselement in HTML te maken, het te selecteren met JavaScript en het diagram te maken terwijl u de gegevens doorgeeft waaruit het diagram is opgebouwd.

In het bovenstaande voorbeeld wordt ervan uitgegaan dat u 'gegevens' en 'opties' als objecten hebt gedefinieerd en een lijngrafiek dienovereenkomstig zou produceren.

In ons voorbeeld gebruiken we de ringdiagram, de lijngrafiek en de radargrafiek. Deze grafieken vertegenwoordigen verschillende bedrijfsgerichte statistieken, maar u kunt deze natuurlijk meenemen en aanpassen aan uw behoeften.

Pagina markup

Laten we beginnen met het definiëren van enkele eenvoudige HTML voor de lay-out van onze pagina.

Hier kunnen we zien dat we een basisgedeelte voor koptekst, midden en voettekst hebben. We gebruiken de .wrapper-klasse en .push-klasse om een ​​plakkerige voettekst te maken (zie hier voor meer informatie). We zullen onze lay-out eerst mobielvriendelijk maken en vanaf daar opschalen. Er zijn een paar trucjes die we onderweg zullen maken, maar deze structuur zal veel van het werk voor ons doen.

Voordat we te ver gaan ...

Let op: canvas speelt niet erg goed met mediaquery's. Voor deze zelfstudie maken we een tijdelijke oplossing om de diagrammen in JavaScript in verschillende grootten opnieuw te laten tekenen.

In ons main.js-bestand moeten we een dimensioneringsfunctie hebben die wordt geactiveerd door een venstergrootte. We hebben ook een functie 'Opnieuw tekenen' nodig om te vuren nadat de functie voor het wijzigen van de grootte is geactiveerd. Als we de diagrammen opnieuw tekenen, willen we niet dat ze worden geïnanimeerd, alsof dit de eerste keer is dat ze worden getekend.

(functie () // stel de time-outvariabele var t; // in, stel de maatfunctie in, // met een argument dat de grafiek vertelt om de animatie te animeren of niet de functie size (animeren) // Als we het formaat wijzigen, we doneren niet dat de grafieken tekenen op elke grootte van de gebeurtenis. // Dit maakt de time-out vrij, zodat we alleen de dimensioneringsfunctie // uitvoeren als we klaar zijn met het wijzigen van het formaat van het venster clearTimeout (t); // Dit zal de time-out herstellen onmiddellijk na het wissen . t = setTimeout (function () $ ("canvas"). each (function (i, el) // Stel de hoogte en breedte van het canvaselement in op de hoogte en breedte van de bovenliggende elementen. // Het bovenliggende element is de div. canvas-container $ (el) .attr ("width": $ (el) .parent (). width (), "height": $ (el) .parent (). outerHeight ());); // start de redraw-functie, die alle diagrammen opbouwt.herschrijf (animeer); // loop door de widgets en vind de hoogste en stel ze allemaal in op die hoogte. var m = 0; // we moeten verwijder eerst elke inline hoogte-instelling zodat we de automatische hoogte krijgen. $ (". widget"). height (""); $ (". widget"). each (functie (i, el) m = Math.max (m, $ (el) .height ());); $ ( "Widget") (m).; , 100); // de time-out moet na 100 milliseconden worden uitgevoerd $ (venster) .on ('formaat wijzigen', grootte); functie opnieuw tekenen (animatie) var options = ; if (! animation) options.animation = false;  else options.animation = true;  // ... // de rest van onze diagramtekening gebeurt hier // ... size (); // dit start de eerste tekening; merk op dat de eerste call-to-size de grafieken animeert.

Als dit een beetje beangstigend lijkt, maak je geen zorgen! Stel een vraag in de comments, en wij en de Tuts + community zullen je helpen om volledig te begrijpen!

Enkele CSS om ons te laten beginnen

We willen een aantal elementaire CSS-structuren opzetten om ons op weg te helpen. HTML5 Boilerplate bevat natuurlijk ook normaliseren en enkele andere standaardwaarden die je kunt wijzigen, maar in het belang van de tutorial zullen we onze CSS schrijven naar de regel "Aangepaste stijlen van de auteur".

html, body height: 100%;  body font-family: 'Source Sans Pro', sans-serif; kleur: # 666;  / * knop * / .knop cursor: pointer; tekstdecoratie: geen; font-size: 0.6em; font-gewicht: 400; text-transform: hoofdletters; weergave: inline-block; opvulling: 4px 6px; marge: 0 10px; positie: relatief; achtergrond: #ccc; kleur: #fff; vakschaduw: 0 0 2px rgba (0,0,0,0.1); achtergrond: rgb (190.190.190); / * Oude browsers * / achtergrond: -moz-linear-gradient (boven, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0%, rgba (190,190,190,1)), kleurstop (100%, rgba (170,170,170,1 ))); / * Chrome, Safari4 + * / achtergrond: -webkit-lineaire gradiënt (boven, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Opera 11.10+ * / achtergrond: -ms-lineaire gradiënt (boven, rgba (190.190.190,1) 0%, rgba (170,170,170,1) 100%); / * IE10 + * / achtergrond: lineair verloop (naar beneden, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# bebebe", endColorstr = "# aaaaaa", GradientType = 0); / * IE6-9 * / .knop: zweeft background: # 637b85;  / * Header stijlen * / header text-align: center; achtergrond: # 637b85; kleur: #fff; margin-bottom: 40px;  header span font-weight: 200;  header .button font-size: 0.2em; top: -6px;  / * verschillende containers * / .container width: 200px; marge: 0 auto;  .canvas-container min-height: 300px; maximale hoogte: 600 px; positie: relatief;  .widget position: relative; margin-bottom: 80px; achtergrond: #efefef; opvulling: 12px; margin-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 

Hier definiëren we de noodzakelijke CSS voor de sticky footer, evenals een knopklasse, een zelfcentrerende containerklasse, een klasse voor het bevatten van onze canvaselementen in onze widgets en onze widgets zelf. We moeten ook het Google-lettertype toevoegen dat we voor het hoofdgedeelte definiëren door dit op te nemen in onze head-tag.

De ringdiagram

Doughnutgrafieken lijken veel op taartgrafieken, alleen hebben ze een deel van het midden uitgesneden. Standaard definieert ChartJS dat 50% van het gebied van de grafiek moet worden weggelaten; we zullen bij deze standaard blijven. De code om de ringdiagram te maken, wordt hieronder getoond.

var data = [waarde: 20, kleur: "# 637b85", waarde: 30, kleur: "# 2c9c69", waarde: 40, kleur: "# dbba34", waarde: 10, kleur: "# c62f29"]; var canvas = document.getElementById ("hours"); var ctx = canvas.getContext ("2d"); nieuwe kaart (ctx) .Doughnut (data);

Hier kunt u zien dat we de gegevens en kleuren van onze doughnutgrafiek hebben gedefinieerd. Dit is alles wat nodig is om de doughnutgrafiek te laten werken. Wat zijn echter de verschillende secties? Helaas heeft ChartJS nog geen gemakkelijke manier om labels voor de ringdiagram te definiëren; we kunnen echter onze eigen legenda maken om elk van de verschillende secties te beschrijven. Wijzig de html van de widget van de doughnut om het volgende op te nemen.

We gebruiken deze li's heel eenvoudig in de CSS, door gebruik te maken van de pseudo-klasse ': before'.

.chart-legend ul lijststijl: geen; breedte: 100%; marge: 30px auto 0;  .chart-legenda li text-indent: 16px; regelhoogte: 24 px; positie: relatief; font-gewicht: 200; weergave: blok; zweven: links; breedte: 50%; font-size: 0.8em;  .chart-legenda li: before display: block; breedte: 10px; hoogte: 16 px; positie: absoluut; links: 0; top: 3px; inhoud: "";  .ship: before background-colour: # 637b85;  .rework: before background-colour: # 2c9c69;  .admin: before background-colour: # dbba34;  .prod: before background-colour: # c62f29; 

Vervolgens willen we een mooie "duim-omhoog" in het midden van de doughnut hebben. Dit omvat CSS-trucjes, waaronder een versie van Uncle Dave's Ol 'Padded Box om de cirkel responsief te maken. We zullen de reeks gebruiken met de klasse .status om deze cirkel te bereiken. Voeg de volgende regels toe aan main.css:

.widget.doughnut .status display: block; positie: absoluut; top: 50%; links: 50%; breedte: 30%; hoogte: 0; padding-top: 12%; opvulbodem: 18%; kleur: # 444; margin-top: -15%; marge links: -15%; lettergrootte: 1,4em; font-gewicht: 700; text-align: center; grensradius: 50%; achtergrondkleur: #aaa; background-image: url (data: image / png, base64, iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAQAAABK + CQQAAAACXBIWXMAAFKnAABSpwHUSB + cAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8 / L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N + QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE + CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9 / NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A / hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V / pHDBYY1hrFGNuayJsym740u2C + 02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT // ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs + ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK / cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta + x / + 5Em0mzJ / + DGJ / t8AyNmf2zvs9JmHt6vvmC pYtEFrcu + bYsc / m9lSGrTq9xWbtvveWGbZtMNm / ZarJt + w6rnft3u + 45uy9s / 4ODOYd + Hmk / Jn58xUnrU + fOJJ / 9dX7SRe1LR68kXv13fc5Nm1t379TfU75 / 4mHeY7En + 59lvhB5efB1 / lv5dxc + NH0y / fzq64Lv4T8Ffp360 / rP8f9 / AA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA + f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAUYSURBVHja1JxdTBxVFMd / O7vssgvLtxIQKrSVQluNiqVp0xAepKSpiaFKVEyMD2oQNGisifFJ06TRN2xjS2Js0geNHy9am5q0wRhNLNZUwI9aQmtDMbUtSFsKLOyye3xgl8KyHwM7uzv3vwkk99yZ + TF759xzzz0DQko / z8kl8ckt + U26pEEciZ4vtfAu6ZE7GpUjcr9K + EUyIEs1JC2irf6MGqmUi5ywlvUcpnX1J0wtvhvXsrZC3qNeDfwcnBFa7 + FtclXAz8cRsb2BJhXwS7FHbHfwJBnmx6 + IatlCmdnxtRj4JdSYHd9JeVSbg01mx8 + jJIbV9INnDcUxrMWrYUkl / kbcMawOs PXYYlhtZh78BRSG9M + + + S8DM JupimkfNTd + + U8yRD1fMPHhK2B3TPsegmfEfizMtjZsZv5QXscbscZ5hs JrtPFInD6nuG1W / D10xPHqY5xc5bmTvjx / VIYlnj4VuxkzDZo0y99x4SekyYyJEqd0yqjE15fiNB9 kXwoHh3wt2Sn + + + dJUZfKF SIPA ++ ThV8sX4s + JTDuk4VvlwOiV8fElci1kuH3G3leZ88ZjjKd2Ixo / IL8hTix5R2d5btEJ3SjVUuD7r5fccNc BZayNPZ9wrfJh5OGavKOHH9Yp1hyGz4u1mru + + + 9PeM2Fn0eL7oyBl3NGxOJGakecbMJSpzlmLnw7z0bYPYkmG5mJX9JmIP4Wdq6gt4smJsnEjg0NKxpa8LeFAH4C PEx wwyzeLjNNB68SJijE6PgrRzipRUdMctsENoS / BD8GYplAvjxM8csk9xknBEG + J4 / F2WEDIt06uSapEL / yFuSbXTIZpNuSZW8clDcxuLv0LWuMko + 2T + / OjbG82TSTlEKc9U2XuUp48Z + s9yWVOu8bDDm7hfzBtmkWht4BZtmwMTXznbSoSfYmrjfb + QT7iI96k4Uv5LPqCNdupQYfj6HeJr0yWsLBlsFOCKGuoKHceaihMf7aSGdGrQI1NHJwxFLVQCm6KWL35e1V7CPZ + Jk7ZOr / 2hH6mUwro / tk5qFHE65VMhmeVn6JCDplF / eFStyUlfnriD + JumXYbkuc5JuHZcCwcY2XV / UVnKYAOysIZ / 06yr7GAdN53zpWigkEsygs / StZLFowVxyz5eVaaipB + cnS1Xxc + ggS1182MUelfEz6aRCXXx4iHaV8TVaVcaHTJXx / RxVGf8b3lcX / 2fe5Lqq + Bd5jQuq + n0P79CrbtAwwPGQ71Tz7ntVxl8bKuZWE788tPWtJr7G4 / M7Y6o6zu08oDJ + IbtUxodtZKqM78KqMv6PTKmL388Rdcf + ZfZyUVX8ETroUXXaGqYtFLCphz9KJycWT79qqZtjS6MHlTRNz9IMt1r4PqbCYze1ZFEZXwvfClQLX8L3dtTCH + Wayvifh7 / DPEN + 2qI8PClUDweXD55JXYdOBVMTPm7iTwv8r7zO1fBGG6dp1HHwGSYAGKKZKqqpYT1lFET5txHG6xfaIhQmYJF6PorzJi3008pfS1qsuCmmgmpqqOJe7iYracMqwAn2Rn4lM1SSURu1JHeK03wQ6S9feBacFFHOfWykmkpKyDW0NneMwxyIVu88X89jpwA7lmU75haEmagFMcuVQR6lrKOaGtZRSBZOHGRgW6iOXYmP9 / AvP / AxvdGfNkuS9vituMnBTS755JNHAfnkkUM22WSThQM7GWSQgQ0IIAQQfMwwzQ3GGOEC5 / idy / hiXeb / AQDtquZeJxF4 YgAAAABJRU5ErkJggg ==); achtergrondherhaling: geen herhaling; achtergrondgrootte: 30%; achtergrond-positie: midden; 

Misschien is het meest in het oog springende element dat hier opvalt het gebruik van de gegevens-URI voor het achtergrondbeeld. Dit stelt ons in staat om een ​​extra HTTP-verzoek te vermijden en is syntactisch synoniem met het gebruik van een daadwerkelijke http-URL. We plaatsen dit element ook om absoluut binnen het .widget-element te worden geplaatst, dat we eerder als relatieve positie hebben ingesteld.

Laten we nu doorgaan en de widget-typografie instellen. We gebruiken alleen h3- en p-elementen in de widget; hier is de begeleidende CSS.

.widget p margin-top: 0; text-align: center;  .widget h3 margin: -12px 0 12px -12px; opvulling: 12px; breedte: 100%; text-align: center; kleur: # 627b86; regelhoogte: 2em; achtergrond: # d0dde3; 

Met de regels voor marge en opvulling van het h3-element kan het element zich uitstrekken tot aan de rand van het widgetelement over de 12px padding van de widget. We stellen ook de bovenmarge in op 0 op het p-element om dichter bij de header van de widget te passen.

De lijngrafiek

Een van de handigste functies van ChartJS is dat sommige diagrammen meerdere gegevensreeksen toestaan. Deze gegevensreeksen worden achtereenvolgens naar hetzelfde diagram getekend, waardoor de ene gegevensreeks met de andere kan worden vergeleken. Een perfect voorbeeld hiervan is handig in lijngrafieken. We zullen twee datasets gebruiken om deze functionaliteit te verkennen.

var data = labels: ["Ma", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [fillColor: "rgba (99,123,133,0.4)" , strokeColor: "rgba (220,220,220,1)", pointColor: "rgba (220,220,220,1)", pointStrokeColor: "#fff", data: [65,54,30,81,56,55,40],  fillColor: "rgba (219,186,52,0,4)", strokeColor: "rgba (220,220,220,1)", pointColor: "rgba (220,220,220,1)", pointStrokeColor: "#fff", data: [20,60,42 , 58,31,21,50],] var canvas = document.getElementById ("verzendingen"); var ctx = canvas.getContext ("2d"); nieuwe kaart (ctx). Lijn (gegevens, opties);

Een paar dingen om op te merken in deze nieuwe code: ten eerste, we hergebruiken de variabelen die we gebruikten om de ringdiagram te bouwen. Dit is volledig geldig in JavaScript en vermindert in feite het geheugen dat door het script in het algemeen wordt gebruikt enigszins. Dit kan echter in de toekomst voor verwarring zorgen en als u van plan bent deze code aan te passen voor gebruik in de productie, kan het effectiever zijn om nieuwe variabelen te gebruiken voor elke nieuwe grafiek die u maakt.

Vervolgens ondersteunt de lijngrafiek labels. Dit is belangrijk omdat we kunnen voorkomen dat op HTML gebaseerde legendes worden gemaakt. Het is echter ook belangrijk dat de datapunten in lijn zijn met de gegeven labels. In dit voorbeeld komt ons eerste gegevenspunt in de eerste gegevensset, 65, overeen met "Mon" in de labels.

Ten slotte zijn onze fillColors voor deze datasets RGB-versies van de kleuren die we eerder hebben gedefinieerd (donkerblauw en geel). We hebben de RGB-waarden gevonden door de kleuren in de kleurkiezer van Photoshop in te voeren, maar dit kan worden gedaan met behulp van een aantal colorpickerhulpmiddelen.

We zullen ook markup toevoegen voor een paar knoppen en een voor mensen leesbaar bereik. De laatste regel widget html ziet er als volgt uit.

We kunnen de extra HTML oppoetsen en gebruikers helpen de datums aan de volgende CSS te koppelen:

.widget.line p span kleur: # dbba34;  .widget.line p strong color: # 637b85; font-gewicht: 400; 

Radar grafiek

Radardiagrammen zijn handig om een ​​selectie van variabelen te distilleren in een enkelvoudig leesbare grafiek om een ​​algemene perceptie te krijgen van het samenspel tussen de verschillende variabelen. In ons voorbeeld zullen we bijvoorbeeld het idee van klantenservice onderzoeken, gebaseerd op het aantal keren dat bepaalde trefwoorden worden genoemd. Op een radargrafiek zullen de geplotte punten een vorm creëren. Die vorm kan ons een algemeen beeld geven van de effectiviteit van klantenservice.

Laten we kijken hoe dit is gemaakt! Nogmaals, we zullen onze variabelen van vroeger opnieuw gebruiken.

var data = labels: ["Helpful", "Friendly", "Kind", "Rude", "Slow", "Frustrating"], datasets: [fillColor: "rgba (220,220,220,0.5)", strokeColor: " # 637b85 ", pointColor:" # dbba34 ", pointStrokeColor:" # 637b85 ", data: [65,59,90,81,30,56]] var canvas = document.getElementById (" afdelingen "); var ctx = canvas.getContext ("2d"); nieuwe kaart (ctx). Radar (gegevens, opties);

En de bijbehorende HTML ziet er als volgt uit:

Intuïtief kunnen we begrijpen dat een vorm die verder naar boven en naar rechts is beter zal zijn dan een vorm die verder naar beneden en naar links is. We verliezen echter niet de specifieke gegevens die voor ons beschikbaar zijn in de grafiek op een gedetailleerd, enkelvoudig variabel niveau. In dit geval wordt het woord 'grof' vaak genoemd, maar het algemene gevoel van klantenservice lijkt positief op basis van andere zoekwoorden.

Alles responsief maken

We hebben onze canvaselementen al ingesteld om responsief te zijn met het JavaScript dat we hebben gebruikt om te reageren op het wijzigen van de grootte van vensters. Nu moeten we onze CSS responsief maken met behulp van mediaquery's. Hier is de CSS die we zullen gebruiken om dit te doen.

@media only screen en (min-width: 300px) .container width: 300px; marge: 0 auto;  @media alleen scherm en (min-breedte: 600px) .container width: 580px; marge: 0 auto;  .third float: left; breedte: 47,5%; marge links: 5%;  .third: first-child margin-left: 0;  .third: last-child display: block; breedte: 100%; marge links: 0;  @media alleen scherm en (min-breedte: 960px) .container width: 940px;  .third float: left; breedte: 30%; marge links: 2,5%; marge-recht: 2,5%;  .third: first-child margin-left: 0;  .third: last-child margin-right: 0; marge links: 2,5%; breedte: 30%;  @media alleen scherm en (min-width: 1140px) .container width: 1120px;  @media alleen scherm en (min-breedte: 1360px) .container width: 1300px; 

Het eerste dat opvalt aan deze CSS is dat alle mediaquery's alleen op basis van de minimale breedte zijn. Dit betekent dat we ontwerpen vanaf de schermen met de laagste breedte en nieuwe regels toevoegen als we naar boven gaan. Ons ontwerp vereist niet veel veranderingen bij elk breekpunt, maar dit patroon is een best-practice in ontwerpen van alle schalen.

We kunnen bij elk breekpunt een aantal basisveranderingen zien, inclusief de breedte van het primaire containerelement en onze behandeling van de derde klas, die we gebruiken op elk van de widgets. Onder 400 stapelen we alle widgets op elkaar. Tussen 400 en 600 maken we de eerste twee widgets halfhoge kolommen en de derde widget (de radargrafiek) de volledige breedte. Eindelijk, boven 960, gebruiken we drie kolommen inline.

Conclusie

In deze zelfstudie zijn de basisstappen voor het maken van een dashboard met behulp van ChartJS beschreven. De fundamentele concepten die hier worden beschreven, zouden je moeten helpen meer betrokken projecten te creëren met behulp van ChartJS, en zouden je ook moeten aanzetten om na te denken over responsief ontwerp vanuit het perspectief van bottom-up.

Welke ervaringen hebt u gehad met het in kaart brengen van bibliotheken? Gebruik je SVG of canvas voor het in kaart brengen van gegevens? Welke dingen wilt u dat ChartJS doet dat het niet doet? Voeg hieronder uw opmerkingen toe!

Leer JavaScript: de complete gids

We hebben een complete handleiding samengesteld om u te helpen JavaScript te leren, of u net bent begonnen als een webontwikkelaar of dat u meer geavanceerde onderwerpen wilt verkennen.