Structura fișierului dvs. ar trebui să arate astfel:

├── 404.html ├── crossdomain.xml ├── css │ ├── main.css │ └── normalize.css ├── favicon.ico ├── img ├── index.html ├── js │ │ ├── main.js ├── roboți plugins.js │ └── furnizor │ ├── jquery-1.10.1.min.js │ └── modernizr-2.6.2.min.js └──. txt

Notă: acest lucru nu include unele dintre fișierele incluse în H5BP pe care nu le vom folosi.

Paleta de culori

Înainte de a intra în codificarea site-ului, să începem prin crearea unei palete de culori pe care o vom folosi pe tot parcursul designului. Făcând acest lucru, putem stabili un viitor "stil de ghid" de feluri; aceasta este o practică obișnuită pentru practic orice proiect dat.

Dacă construiți tabloul de bord cu o anumită marcă, începeți cu ajutorul culorilor mărcii. Astăzi, vom defini două culori principale și două culori auxiliare. Vom folosi, de asemenea, nuanțe sau versiuni decolorate ale acestor culori.

• albastru inchis: # 637b85
• verde: # 2c9c69
• galben: # dbba34
• roșu: # c62f29

De asemenea, vom folosi o nuanță mai deschisă a albastru închis, # d0dde3. În cele din urmă, vom folosi culori în tonuri de gri.

Cartea principiilor ChartJS

ChartJS utilizează elementul de panza. Elementul canvas oferă o interfață numai pentru JavaScript pentru a desena pixeli într-o anumită zonă dreptunghiulară. Acesta este adesea comparat cu SVG, care oferă o soluție bazată pe nod DOM pentru a crea grafică vectorială în browser. Cu toate acestea, pixelii atrasi de elementul canvas nu sunt păstrați în memorie și astfel nu răspund la evenimentele JavaScript.

Dar destul de mult cu discuțiile despre tehnologie - cum începem rapid cu ChartJS?

Din fericire, pagina de pornire ChartJS are o multime de exemple pentru a ne incepe rapid. Modelul de bază este să creați elementul de panza în HTML, să îl selectați cu JavaScript și să creați graficul în timp ce treceți în datele pe care este construit graficul.

Exemplul de mai sus presupune că ați definit "date" și "opțiuni" ca obiecte și ar produce un grafic în mod corespunzător.

În exemplul nostru vom folosi graficul Donut, graficul Line și graficul Radar. Aceste grafice vor reprezenta diferite valori de afacere orientate spre afaceri, dar, bineînțeles, puteți lua acest lucru și îl puteți adapta nevoilor dvs..

Marcajul paginii

Să începem prin definirea unor coduri HTML de bază pentru aspectul paginii noastre.

Aici vedem că avem o secțiune de bază antet, mijloc și subsol. Folosim clasa .wrapper și clasa .push pentru a crea un subsol lipicios (vedeți aici pentru mai multe informații). Vom crea aspectul nostru pentru a fi primul pe telefonul mobil și pentru a ne extinde de acolo. Există câteva trucuri pe care le vom trage, dar această structură va face mult pentru noi.

Înainte de a merge prea departe ...

Rețineți că panza nu se joacă foarte bine cu interogările media. Pentru acest tutorial, vom crea o soluție pentru a permite ca graficele să fie redesenate la dimensiuni diferite în JavaScript.

În interiorul fișierului nostru principal.js, va trebui să avem o funcție de dimensionare care este declanșată de o modificare a ferestrei. Vom avea nevoie, de asemenea, de o functie de "redraw" pentru a incendii dupa incendierea functiei de redimensionare. În cele din urmă, când redestim diagramele, nu vrem să le animăm, ca și cum ar fi prima dată când sunt trase.

(functie () // setarea variabilei time-out var t; // setarea functiei de dimensionare, // cu un argument care spune graficului sa animeze sau nu dimensiunea functiei (animate) // Daca redimensionam, nu facem 'nu vrea ca graficele să tragă la fiecare eveniment de redimensionare // Aceasta elimină timpul de expirare astfel încât să executăm funcția dimensionare // numai când am terminat redimensionarea ferestrei clearTimeout (t); // Aceasta va reinițializa timpul de expirare imediat după ce îl șterge (t) = setTimeout (functie () $ ("canvas") fiecare (functie (i, el) // Stabileste inaltimea si latura elementului canvas la inaltimea si latimea parintelui. Canvas-Container $ (el) .attr ("lățime": $ (el) .parent () width (), "height": $ (el). // kickoff funcția redraw, care construiește toate topurile redesenarea (animate);. // bucla prin widget-uri și pentru a găsi cel mai înalt unul, și a stabilit toate acestea la acea înălțime var m = 0;. // trebuie să eliminați mai întâi orice setare a înălțimii în linie astfel încât să obținem înălțimea automată $ (". widget") înălțime (""); (funcția (i, el) m = Math.max (m, $ (el) .height ());); $ ( "Widget") înălțime (m).; , 100); // timpul de expirare ar trebui să ruleze după 100 milisecunde $ (fereastră) .on ("redimensionare", dimensiune); funcția redraw (animație) var options = ; dacă (! animație) options.animation = false;  altceva options.animation = true;  // ... // restul diagramei noastre se va întâmpla aici // ... size (); // aceasta deschide primul desen; rețineți că primul apel la mărime va anima graficele din.

Dacă acest lucru pare puțin deranjant, nu vă faceți griji! Puneți o întrebare în comentarii, iar noi și comunitatea Tuts + vă veți ajuta să înțelegeți pe deplin!

Unele CSS-uri pentru a ne începe

Vrem să instituim câteva structuri CSS de bază pentru a ne începe. HTML5 Boilerplate include, desigur, normalizarea și alte setări implicite pe care le puteți schimba, dar de dragul tutorialului, vom scrie CSS după rândul "Stiluri personalizate ale autorului".

html, corp înălțime: 100%;  corp font-family: "Source Sans Pro", sans-serif; culoare: # 666;  / * buton * / .button cursor: pointer; text-decoration: nici unul; font-size: 0.6; greutatea fontului: 400; text-transform: majuscule; afișare: inline-block; padding: 4px 6px; margine: 0 10px; poziție: relativă; fundal: #ccc; culoare: #fff; box-shadow: 0 0 2px rgba (0,0,0,0,1); fundal: rgb (190,190,190); / * Browsere vechi * / fundal: -moz-linear-gradient (top, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * FF3.6 + * / fundal: -webkit gradient (liniar, stanga sus, stanga jos, culoare-stop (0%, RGBA (190,190,190,1)), culoare-stop (100%, RGBA (170,170,170,1 ))); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (top, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Opera 11.10+ * / fundal: -ms-gradient linear (top, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * IE10 + * / fundal: gradient linear (la fund, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * W3C * / Filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# bebebe", endColorstr = "# aaaaaa", GradientType = 0); / * IE6-9 * / .button: hover fundal: # 637b85;  / * Stiluri de antet * / header text-align: center; fundal: # 637b85; culoare: #fff; margin-bottom: 40px;  spațiu antet font-weight: 200;  header .button font-size: 0.2; top: -6px;  / * containere diferite * / .container width: 200px; marja: 0 auto;  .canvas-container min-height: 300px; max-height: 600px; poziție: relativă;  .getați poziție: relativă; margin-bottom: 80px; fundal: #efefef; padding: 12px; margin-bottom: 30px; -webkit-box-size: caseta de frontieră; -moz-box-size: caseta de margine; box-size: caseta de margine; 

Aici definim CSS-ul necesar pentru subsolul lipicios, precum și o clasă de butoane, o clasă de containere cu auto-centrare, o clasă pentru conținutul elementelor noastre de panza din interiorul widget-urilor noastre și widget-urile noastre. De asemenea, va trebui să adăugăm fontul Google pe care îl definim pentru organism prin includerea acestuia în eticheta noastră principală.

Graficul Donut

Graficele de donație sunt foarte asemănătoare grafurilor plăcilor, cu excepția faptului că au o parte din mijlocul tăiat. Implicit, ChartJS definește faptul că 50% din suprafața graficului ar trebui să fie lăsată în afară; vom rămâne cu această valoare prestabilită. Codul pentru a crea graficul de donut este prezentat mai jos.

date var = [value: 20, culoare: "# 637b85", value: 30, culoare: "# 2c9c69", value: 40, culoare: "# dbba34", value: 10, culoare: "# c62f29"]; var canvas = document.getElementById ("ore"); var ctx = canvas.getContext ("2d"); diagramă nouă (ctx); castron (date);

Aici, puteți vedea că am definit datele și culorile graficului nostru de donut. Acesta este tot ceea ce este necesar pentru a face lucrul cu graficul de gogoși. Cu toate acestea, ce reprezintă fiecare dintre secțiuni? Din păcate, ChartJS nu are încă o modalitate ușoară de a defini etichete pentru graficul gogoșilor; totuși, putem să ne facem propria legendă pentru a descrie fiecare secțiune diferită. Modificați html widget-ul widget pentru a include următoarele.

Utilizăm aceste litere în clasele lor foarte simplu în CSS, folosindu-ne pseudo-clasa "înainte".

.diagramă-legendă ul list-style: none; lățime: 100%; margine: 30 pixeli automat 0; . legendă carte li text-indent: 16px; linia-înălțime: 24px; poziție: relativă; greutatea fontului: 200; afișare: bloc; plutește la stânga; lățime: 50%; font-size: 0.8cm; . legenda carte li: înainte de display: block; lățime: 10px; înălțime: 16px; poziția: absolută; stânga: 0; top: 3px; conținut: "";  .ship: înainte de background-color: # 637b85;  .de lucrare: înainte de background-color: # 2c9c69;  .admin: înainte de background-color: # dbba34;  .prod: înainte de background-color: # c62f29; 

Apoi, vrem să avem un "minunat" în centrul gogoșii. Acest lucru implică unele trădări CSS, inclusiv o versiune a lui Ol 'Padded Box pentru unchiul Dave, pentru a obține cercul să fie receptiv. Vom folosi intervalul cu clasa .status pentru a realiza acest cerc. Adăugați următoarele reguli la main.css:

.widget.doughnut .status display: bloc; poziția: absolută; top: 50%; stânga: 50%; lățime: 30%; înălțime: 0; pad-top: 12%; pad-bottom: 18%; culoare: # 444; marginea superioară: -15%; marginea stângă: -15%; font-size: 1.4; greutatea fontului: 700; text-align: centru; raza de graniță: 50%; fundal-culoare: #aaa; background-image: url (date: 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 + EWSe ++ 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 ==); background-repeat: nu-repeta; dimensiunea fundalului: 30%; fundal-poziție: centru; 

Poate cel mai evident element care stă aici este folosirea URI-ului de date pentru imaginea de fundal. Acest lucru ne permite să evităm o cerere HTTP suplimentară și este sinonimă sintactic cu utilizarea unei adrese url http actuale. De asemenea, setăm acest element pentru a fi poziționat absolut în interiorul elementului său .widget, pe care anterior l-am stabilit ca fiind pozitiv relativ.

Hai să mergem mai departe și să pregătim tipografia widget. Folosim numai elemente h3 și p în interiorul widget-ului; aici este css-ul însoțitor.

.widget p margin-top: 0; text-align: centru;  .widget h3 marja: -12px 0 12px -12px; padding: 12px; lățime: 100%; text-align: centru; culoare: # 627b86; linia-înălțime: 2em; fundal: # d0dde3; 

Regulile de margine și de umplutură de pe elementul h3 permit elementului să se întindă până la marginea elementului widget deasupra vârfului de 12px al padding-ului widgetului. De asemenea, setăm marginea superioară la 0 pentru elementul p pentru a se potrivi mai aproape de antetul widgetului.

Graficul graficului

Una dintre caracteristicile cele mai utile ale ChartJS este că unele dintre diagrame permit seturi de date multiple. Aceste seturi de date vor fi trase succesiv pe aceeași diagramă, permițând compararea unui set de date cu altul. Un exemplu perfect al acestei utilități este reprezentat de graficele de linii. Vom utiliza două seturi de date pentru a explora această funcție.

var data = etichete: ["Mon", "Tue", "Miercuri", "Thu", "Fri", "Sat", "Soare"], seturi de date: fillColor: "rgba (99,123,133,0,4)" , cursColor: "rgba (220,220,220,1)", punctColor: "rgba (220,220,220,1)", punctStrokeColor: "#fff", date: [65,54,30,81,56,55,40] "rgba (220,220,220,1)", pointStrokeColor: "#fff", date: [20,60,42] , 58,31,21,50],] var canvas = document.getElementById ("expedieri"); var ctx = canvas.getContext ("2d"); diagramă nouă (ctx). Linie (date, opțiuni);

Câteva lucruri de reținut în acest nou cod: în primul rând, reutilizăm variabilele folosite pentru a construi graficul de donut. Acest lucru este complet valabil în JavaScript și, de fapt, reduce ușor memoria utilizată de scenariul general. Cu toate acestea, acest lucru poate provoca confuzii în viitor și dacă intenționați să adaptați acest cod la utilizarea în producție, poate fi mai eficient să utilizați noi variabile pentru fiecare diagramă nouă pe care o creați.

În continuare, graficul de linie acceptă etichete. Acest lucru este important, deoarece ne permite să evităm crearea legendelor bazate pe HTML. Cu toate acestea, este de asemenea important ca punctele de date să se alinieze cu etichetele date. În acest exemplu, primul nostru punct de date din primul set de date, 65, se potrivește cu "Mon" în etichete.

În cele din urmă, culorile noastre de umplere pentru aceste seturi de date sunt versiuni RGBa ale culorilor definite anterior (albastru închis și galben). Am găsit valorile RGB prin introducerea culorilor în selectorul de culori Photoshop, dar acest lucru se poate face folosind oricare dintre uneltele colorpicker.

Vom adăuga, de asemenea, un markup pentru câteva butoane și o gamă care poate fi citită de oameni. Html widget-ul final arată după cum urmează.

Putem poloneze codul suplimentar HTML și îi ajutăm pe utilizatori să conecteze datele cu următorul CSS:

.widget.line p span culoare: # dbba34;  .widget.line p puternic culoare: # 637b85; greutatea fontului: 400; 

Radar grafic

Graficele radar sunt utile pentru a distila o selecție de variabile într-un grafic singular de citit pentru a obține o percepție generală a interacțiunii dintre diferitele variabile. În exemplul nostru, de exemplu, vom explora ideea de servicii pentru clienți, în funcție de numărul de cuvinte cheie menționate. Pe un grafic radar, punctele reprezentate vor crea o formă. Această formă ne poate da un sentiment general al eficacității serviciului pentru clienți.

Să vedem cum este creat! Încă o dată, ne vom reutiliza variabilele de acum înainte.

var data = etichete: ["Utile", "Prietenos", "Kind", "Rude", "Slow", "Frustrator"], seturi de date: fillColor: "rgba (220,220,220,0.5)", strokeColor: # 637b85 ", punctColor:" # dbba34 ", punctStrokeColor:" # 637b85 ", date: [65,59,90,81,30,56]] var canvas = document.getElementById (" departamente "); var ctx = canvas.getContext ("2d"); noul grafic (ctx) .Radar (date, opțiuni);

HTML-ul care va însoțește va arăta astfel:

Intuitiv, putem înțelege că o formă care este mai sus și spre dreapta va fi mai bună decât o formă care este mai în jos și spre stânga. Cu toate acestea, nu pierdem datele specifice disponibile în cadrul graficului la nivel granular, cu o singură variabilă. În acest caz, se menționează adesea cuvântul "nepoliticos", dar sentimentul general al serviciului pentru clienți pare pozitiv pe baza altor cuvinte cheie.

Realizați-o pe toți responsabili

Am creat deja elemente de panza pentru a răspunde la JavaScript folosit pentru a răspunde la redimensionarea ferestrelor. Acum, trebuie să facem răspunsul nostru CSS folosind interogări media. Aici este CSS pe care o vom folosi pentru a face acest lucru.

@media numai pe ecran și (min-width: 300px) .container width: 300px; marja: 0 auto;  Numai ecranul @media și (min-width: 600px) .container width: 580px; marja: 0 auto;  a treia float: left; lățime: 47,5%; marginea stângă: 5%;  al treilea: primul copil marginea-stânga: 0;  a treia: ultimul copil display: block; lățime: 100%; margin-stânga: 0;  numai ecranul @media și (min-width: 960px) .container width: 940px;  a treia float: left; lățime: 30%; margin-stânga: 2,5%; margin-dreapta: 2,5%;  al treilea: primul copil marginea-stânga: 0;  al treilea: ultimul copil margin-right: 0; margin-stânga: 2,5%; lățime: 30%;  numai pentru ecranul @media și (min-width: 1140px) .container width: 1120px;  numai pentru ecranul @media și (min-width: 1360px) .container width: 1300px; 

Primul lucru pe care trebuie să-l observați în legătură cu acest CSS este că toate interogările media sunt doar min-lățime. Acest lucru înseamnă că suntem proiectați din ecranele cu lățimea cea mai mică și adăugați noi reguli pe măsură ce ne mișcăm în sus. Designul nostru nu necesită o mulțime de schimbări la fiecare punct de întrerupere, dar acest model este o practică optimă în desene sau modele de toate scările.

Putem vedea câteva modificări de aspect de bază la fiecare punct de întrerupere, inclusiv lățimea elementului principal al containerului, precum și tratamentul nostru al clasei .third, pe care îl folosim în fiecare dintre widget-uri. Peste 400, punem toate widget-urile una peste alta. Între 400 și 600, facem primele două coloane de widget-uri pe jumătate de lățime și cel de-al treilea widget (graficul radar) cu lățime întreagă. În final, peste 960, folosim trei coloane în linie.

Concluzie

Acest tutorial vă oferă pașii de bază pentru crearea unui tablou de bord utilizând ChartJS. Conceptele fundamentale descrise aici ar trebui să vă ajute să creați mai multe proiecte implicate utilizând ChartJS și ar trebui, de asemenea, să vă încurajați să vă gândiți la designul receptiv din perspectiva abordării de jos în sus.

Ce experiențe ați avut cu bibliotecile de diagramă? Folosiți SVG sau panza pentru a schimba datele? Ce lucruri vrei tu să faci ChartJS că nu-i așa? Adăugați comentariile dvs. mai jos!

Aflați JavaScript: Ghidul complet

Am creat un ghid complet care vă ajută să învățați JavaScript, indiferent dacă începeți doar ca dezvoltator web sau doriți să explorați subiecte mai avansate.