Filstrukturen din bør se slik ut:

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

Merk: Dette inkluderer ikke noen av filene som er inkludert i H5BP som vi ikke skal bruke.

Farge palett

Før vi går inn i kodingen av nettstedet, la oss starte med å sette opp en fargepalett som vi skal bruke gjennom hele designet. Ved å gjøre dette kan vi etablere en fremtidig "style guide" av slags; Dette er en vanlig praksis for i utgangspunktet ethvert gitt design.

Hvis du bygger instrumentbrettet med et bestemt merke i tankene, starter du med å bruke merkevarens farger. I dag skal vi definere to hovedfargene og to tilleggsfargene. Vi vil også bruke nyanser eller bleknet versjoner av disse fargene.

• mørke blå: # 637b85
• grønn: # 2c9c69
• gul: # dbba34
• rød: # c62f29

Vi vil også bruke en lysere nyanse av mørkblå, # d0dde3. Til slutt vil vi benytte gråtonerfarger.

ChartJS Grunnleggende

ChartJS bruker lerretelementet. Lerretelementet gir et JavaScript-bare grensesnitt for å tegne piksler til et gitt rektangelområde. Det er ofte sammenlignet med SVG, som tilbyr en DOM-nodebasert løsning for å lage vektorgrafik i nettleseren. Imidlertid blir piksler trukket til lerretelementet ikke lagret i minnet og reagerer dermed ikke på JavaScript-hendelser.

Men nok med teknisk snakk - hvordan starter vi raskt med ChartJS?

Heldigvis har ChartJS hjemmeside mange eksempler for å komme raskt igang. Det grunnleggende mønsteret er å lage lerretelementet i HTML, velg det med JavaScript, og opprett diagrammet mens du passerer dataene diagrammet er bygget fra.

Eksemplet ovenfor ville anta at du hadde definert 'data' og 'alternativer' som objekter, og ville produsere en linjediagram tilsvarende.

I vårt eksempel vil vi bruke Donut-grafen, Linjediagrammet og Radar-grafen. Disse grafene representerer ulike forretningsmessige mål, men selvfølgelig kan du ta dette og tilpasse det til dine behov.

Sidemarkering

La oss begynne med å definere noen grunnleggende HTML for utformingen av vår side.

Her kan vi se at vi har en grunnleggende overskrift, mellom- og bunntekst. Vi bruker .wrapper-klassen og .push-klassen for å lage en klebrig bunntekst (se her for mer info). Vi vil skape vårt oppsett for å være mobil vennlig først, og å skalere opp derfra. Det er noen triks vi vil trekke underveis, men denne strukturen vil gjøre mye av arbeidet for oss.

Før vi går for langt ...

Vær oppmerksom på at lerret ikke spiller veldig bra med medieforespørsler. For denne opplæringen, vil vi skape en løsning for å tillate at diagrammene blir redrawn i forskjellige størrelser i JavaScript.

I vår main.js-fil må vi ha en størrelsesfunksjon som utløses av et vinduesformat. Vi vil også trenge en "redraw" -funksjon for å brenne etter endringsfunksjonens branner. Til slutt, når vi redrager diagrammene, vil vi ikke at de skal animere inn, som om dette er første gang de blir tegnet.

(funksjon () // sett opp tidsavbruddsvariabelen var t; // sett inn størrelsesfunksjonen, // med et argument som forteller diagrammet for å animere eller ikke funksjonsstørrelse (animere) // Hvis vi endrer størrelsen, gjør vi ikke Jeg vil ikke at diagrammene skal tegne på hver resize-hendelse. // Dette fjerner tidsavbrudd slik at vi bare kjører størrelsesfunksjonen // når vi er ferdige, størrelsen på vinduet clearTimeout (t); // Dette vil nullstille tidsavbrudd rett etter at du har fjernet det .T = setTimeout (funksjon () $ ("lerret"). hver (funksjon (i, el) // Still inn lerretelementets høyde og bredde til foreldrenes høyde og bredde. // Foreldreelementet er div. lerretskasse $ (el) .attr ("bredde": $ (el) .parent (). bredde (), "høyde": $ (el) .parent (). outerHeight ();; // slå av redraw-funksjonen, som bygger alle diagrammene. redraw (animere); // loop gjennom widgets og finn den høyeste, og sett dem alle til den høyden. var m = 0; // vi må Fjern alt innstillingshøydeinnstilling først slik at vi får den automatiske høyden. $ (". widget"). høyde (""); $ (". widget"). hver (funksjon (i, el) m = Math.max (m, $ (el) .height ());); $ ( "Widget") høyde (m.); , 100); // timeout skal løpe etter 100 millisekunder $ (vindu) .on ('resize', størrelse); funksjonen redraw (animasjon) var options = ; hvis (! animasjon) options.animation = false;  else options.animation = true;  // // // resten av diagramtegningen vår vil skje her // ... størrelse (); // dette sparker av den første tegningen; Legg merke til at det første anropet til størrelse vil animere diagrammene i.

Hvis dette virker litt skremmende, ikke bekymre deg! Still et spørsmål i kommentarene, og vi og Tuts + -samfunnet vil hjelpe deg å forstå fullt ut!

Noen CSS for å få oss til å starte

Vi ønsker å sette opp noen grunnleggende CSS strukturer for å komme i gang. HTML5 Boilerplate inkluderer selvfølgelig normalisering og noen andre standardinnstillinger som du kan endre, men for veiledningens skyld vil vi skrive vår CSS etter linjen "Forfatterens egendefinerte stiler".

html, kropp høyde: 100%;  kropp font-family: 'Source Sans Pro', sans-serif; farge: # 666;  / * -knappen * / .button cursor: pointer; tekst-dekorasjon: ingen; fontstørrelse: 0,6em; font-weight: 400; tekst-transformer: store bokstaver; display: inline-block; polstring: 4px 6px; margin: 0 10px; stilling: relativ; bakgrunn: #ccc; farge: #fff; boks-skygge: 0 0 2px rgba (0,0,0,0,1); bakgrunn: rgb (190 19090); / * Gamle nettlesere * / bakgrunn: -moz-lineær gradient (topp, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, rgba (190,190,190,1)), fargestopp (100%, rgba (170,170,170,1 ))); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær gradient (topp, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær gradient (topp, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Opera 11.10+ * / bakgrunn: -ms-lineær gradient (topp, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * IE10 + * / bakgrunn: lineær gradient (til bunn, 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 * /. Knapp: svever bakgrunn: # 637b85;  / * Overskriftsstiler * / header text-align: center; bakgrunn: # 637b85; farge: #fff; marginbunn: 40px;  topptekst font-weight: 200;  header.button font-size: 0.2em; topp: -6px;  / * forskjellige beholdere * / .container bredde: 200px; margin: 0 auto;  .canvas-container min-høyde: 300px; maksimal høyde: 600px; stilling: relativ;  .widget posisjon: relative; margin-bunn: 80px; bakgrunn: #efefef; polstring: 12px; margin-bunn: 30px; -webkit-boks-størrelse: border-box; -moz-box-size: border-box; boks-størrelse: border-box; 

Her definerer vi den nødvendige CSS for den klissete bunnteksten, samt en knappeklasse, en selvcentrerende containersklasse, en klasse for å inneholde lerretelementene våre i widgetene våre, og våre widgets selv. Vi må også legge til Google-skrifttypen som vi definerer for kroppen, ved å inkludere dette i hodetiketten vår.

Donutgrafen

Donutgrafer er mye som pajegraver, bortsett fra at de har en del av den midterste kutte ut. Som standard definerer ChartJS at 50% av arealet av grafen skal utelukkes; Vi vil bli med denne standarden. Koden for å lage doughnutgrafen er vist nedenfor.

var value: 40, color: "# dbba34", verdi: 10, farge: "# 637b85", verdi: 30, farge: "# 2c9c69", "# c62f29"]; var lerret = document.getElementById ("timer"); var ctx = canvas.getContext ("2d"); Nytt diagram (ctx). Doughnut (data);

Her kan du se at vi har definert vår doughnutdiagrams data og farger. Dette er alt som trengs for å gjøre doughnutgrafen virke. Men hva er hver av delene som representerer? Dessverre har ChartJS ikke en enkel måte å definere etiketter på doughnutgrafen på. Vi kan imidlertid lage vår egen legende for å beskrive hver av de forskjellige seksjonene. Endre donut-widgetens html for å inkludere følgende.

Vi bruker disse liene etter sine klasser ganske enkelt i CSS, ved å utnytte "før" pseudoklassen.

.kartleggen ul listestil: none; bredde: 100%; margin: 30px auto 0;  .chart-legend li text-indent: 16px; linjehøyde: 24px; stilling: relativ; font-weight: 200; skjerm: blokk; flyte: venstre; bredde: 50%; fontstørrelse: 0.8em;  .chart-legend li: før display: block; bredde: 10px; høyde: 16px; posisjon: absolutt; venstre: 0; topp: 3px; innhold: "";  .ship: før bakgrunnsfarge: # 637b85;  .rework: før bakgrunnsfarge: # 2c9c69;  .admin: før bakgrunnsfarge: # dbba34;  .prod: før bakgrunnsfarge: # c62f29; 

Deretter vil vi ha en fin "tommelen opp" i midten av smultringen. Dette innebærer noen CSS-trickery, inkludert en versjon av Uncle Daves Ol 'Padded Box for å få sirkelen til å være responsiv. Vi vil bruke spenningen med klassen .status for å oppnå denne sirkelen. Legg til følgende regler for main.css:

.widget.doughnut .status display: block; posisjon: absolutt; topp: 50%; venstre: 50%; bredde: 30%; høyde: 0; polstring: 12%; polstring-bunn: 18%; farge: # 444; margin-top: -15%; margin-venstre: -15%; fontstørrelse: 1.4em; font-weight: 700; tekst-align: center; border-radius: 50%; bakgrunnsfarge: #aaa; bakgrunnsbilde-: 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 + 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 / Gj / AxvdGfNkuS9vituMnBTS755JNHAfnkkUM22WSThQM7GWSQgQ0IIAQQfMwwzQ3GGOEC5 / IDY / hiXeb / AQDtquZeJxF4 YgAAAABJRU5ErkJggg ==); bakgrunn-gjentak: ikke-gjenta; bakgrunnsstørrelse: 30%; bakgrunnsposisjon: senter; 

Kanskje det mest klare elementet som står her ute, er bruken av data URI for bakgrunnsbildet. Dette tillater oss å unngå en ekstra HTTP-forespørsel, og er syntaktisk synonymt med å bruke en faktisk http url. Vi stiller også dette elementet til å bli plassert helt innenfor sitt .widget-element, som vi tidligere satte til å være stillingsrelatert.

La oss nå gå videre og sette opp widgettypen. Vi bruker bare h3 og p elementer inne i widgeten; her er den medfølgende css.

.widget p margin-top: 0; tekst-align: center;  .widget h3 margin: -12px 0 12px -12px; polstring: 12px; bredde: 100%; tekst-align: center; farge: # 627b86; linjehøyde: 2em; bakgrunn: # d0dde3; 

Marginasjons- og polstringsreglene på h3-elementet tillater elementet å strekke seg til kanten av widgetelementet over toppen av widgetens 12px av polstring. Vi stiller også toppmarginalen til 0 på p-elementet for å passe nærmere på overskriften til widgeten.

Linjediagrammet

En av de mest nyttige funksjonene i ChartJS er at noen av diagrammene tillater flere datasett. Disse datasettene vil bli trukket til samme diagram i rekkefølge, slik at et datasett kan sammenlignes med et annet. Et perfekt eksempel på at dette er nyttig er i linjediagrammer. Vi vil bruke to datasett for å utforske denne funksjonaliteten.

var data = etiketter: ["Mon", "Tue", "Wed", "Thu", "Fri", "Lør", "Sol"], datasett: [fillColor: "rgba (99,123,133,0,4) , strokeColor: "rgba (220,220,220,1)", punktColor: "rgba (220,220,220,1)", punktStrokeColor: "#fff", data: [65,54,30,81,56,55,40],  fillColor: "rgba (219,186,52,0,4)", strokeColor: "rgba (220,220,220,1)", punktColor: "rgba (220,220,220,1)", punktStrokeColor: "#fff", data: [20,60,42 , 58,31,21,50],] var canvas = document.getElementById ("forsendelser"); var ctx = canvas.getContext ("2d"); nytt diagram (ctx). linje (data, alternativer);

Et par ting å merke seg i denne nye koden: For det første bruker vi de variablene vi brukte til å bygge doughnutgrafen. Dette er helt gyldig i JavaScript, og reduserer faktisk minnet som brukes av scriptet generelt. Dette kan imidlertid føre til forvirring i fremtiden, og hvis du planlegger å tilpasse denne koden til bruk i produksjon, kan det være mer effektivt å bruke nye variabler for hvert nytt diagram du oppretter.

Deretter støtter linjediagrammet etiketter. Dette er viktig, da det tillater oss å unngå å lage HTML-baserte legender. Det er imidlertid også viktig at datapunktene stemmer overens med etikettene. I dette eksemplet matcher vårt første datapunkt i det første datasettet, 65, til "Måned" i etikettene.

Til slutt er våre fillColors for disse datasettene RGBa-versjoner av fargene vi tidligere har definert (mørkblå og gul). Vi fant RGB-verdiene ved å legge inn fargene i Photoshop's fargeplukker, men dette kan gjøres ved hjelp av noen av en rekke colorpicker-verktøy.

Vi vil også legge til oppslag for noen få knapper og et lesbart område. Den endelige linjed widgeten html ser ut som følgende.

Vi kan polere ekstra HTML og hjelpe brukerne til å koble datoene med følgende CSS:

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

Radargraf

Radargrafer er nyttige for å destillere et utvalg av variabler i en enkelt lesbar graf for å få en generell oppfatning av samspillet mellom de forskjellige variablene. I eksempelet vårt vil vi for eksempel undersøke ideen om kundeservice, basert på antall ganger bestemte søkeord er nevnt. På radargrafikk vil poengene tegnet skape en form. Denne formen kan gi oss en generell følelse av effektiviteten av kundeservice.

La oss se hvordan dette er opprettet! Igjen, vil vi gjenbruke våre variabler fra før.

var data = etiketter: ["Helpful", "Friendly", "Kind", "Rude", "Slow", "Frustrating"], datasett: [fillColor: "rgba (220,220,220,0,5)", strokeColor: # 637b85 ", punktColor:" # dbba34 ", punktStrokeColor:" # 637b85 ", data: [65,59,90,81,30,56] Var kanvas = document.getElementById (" avdelinger "); var ctx = canvas.getContext ("2d"); nytt diagram (ctx) .Radar (data, alternativer);

Og den vedlagte HTML vil se ut som følgende:

Intuitivt kan vi forstå at en form som er lengre oppe og til høyre blir bedre enn en form som er lenger nede og til venstre. Imidlertid mister vi ikke de spesifikke dataene som er tilgjengelige for oss i grafen, på et granulært, enkeltvariabelt nivå. I dette tilfellet blir ordet "uhøflig" nevnt ofte, men den generelle følelsen av kundeservice virker positivt basert på andre søkeord.

Gjør det hele Responsive

Vi har allerede satt opp våre lerretelementer for å være lydhør overfor JavaScript som vi brukte til å svare på vinduets resizing. Nå må vi gjøre vårt CSS responsivt ved hjelp av medieforespørsler. Her er css vi vil bruke til å gjøre dette.

@media bare skjerm og (min bredde: 300px) .container width: 300px; margin: 0 auto;  @media bare skjerm og (min bredde: 600px) .container width: 580px; margin: 0 auto; . tredje float: left; bredde: 47,5%; margin-venstre: 5%; . tredje: første barn margin-left: 0; . tredje: siste barn display: block; bredde: 100%; margin-venstre: 0;  @media bare skjerm og (min bredde: 960px) .container width: 940px; . tredje float: left; bredde: 30%; margin-venstre: 2,5%; margin-høyre: 2,5%; . tredje: første barn margin-left: 0; . tredje: siste barn margen-høyre: 0; margin-venstre: 2,5%; bredde: 30%;  @media bare skjerm og (min bredde: 1140px) .container width: 1120px;  @media bare skjerm og (min-bredde: 1360px) .container width: 1300px; 

Det første du må legge merke til om dette CSS er at alle medieforespørsmålene bare er basert på min bredde. Dette betyr at vi designer fra de nederste breddeskjermene og legger til nye regler når vi beveger oss opp. Vårt design krever ikke mange endringer på hvert bruddpunkt, men dette mønsteret er en best practice i design av alle skalaer.

Vi kan se noen grunnleggende layoutendringer ved hvert bruddpunkt, inkludert primærbeholderelementets bredde, samt vår behandling av den tredje klasse, som vi bruker på hver av widgetene. Under 400 lagrer vi alle widgets på toppen av hverandre. Mellom 400 og 600 lager vi de to første widgetene halvbredde kolonnene, og den tredje widgeten (radargrafen) i full bredde. Til slutt, over 960, bruker vi tre kolonner inline.

Konklusjon

Denne opplæringen har tatt deg gjennom de grunnleggende trinnene for å opprette et dashbord ved hjelp av ChartJS. De grunnleggende konseptene som beskrives her, bør hjelpe deg med å skape mer involverte prosjekter ved hjelp av ChartJS, og bør også oppfordre deg til å tenke på responsiv design fra bunn-perspektivet.

Hvilke erfaringer har du hatt med kartlegging av biblioteker? Bruker du SVG eller lerret for å kartlegge data? Hvilke ting ønsker du ChartJS ville gjøre det ikke? Legg til dine kommentarer nedenfor!

Lær JavaScript: Den komplette veiledningen

Vi har bygget en komplett guide for å hjelpe deg med å lære JavaScript, enten du er bare i gang som webutvikler eller du vil utforske mer avanserte emner.