Brug Chart.js til at omdanne data til interaktive diagrammer

Side 2 af 2: Brug af Chart.js: Trin 11-20

11. Forbedre tærtefarvning

Tilføjelse af mønstre gør dine diagrammer tilgængelige for farveblinde brugere

Tilføjelse af mønstre gør dine diagrammer tilgængelige for farveblinde brugere

Chart.js indeholder ikke en tilfældig farvegenerator - hvis du ikke angiver et farvearray, ændres farver ikke. Da design af systemer, der udelukkende er baseret på farver, er ineffektivt - mange individer lider af farveblindhed. En god måde at omgå problemet på er mønster bibliotek.



var mypie = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ backgroundColor: [ pattern. draw('square', '#ff6384'), pattern. draw('circle', '#36a2eb'), pattern. draw('diamond', '#cc65fe'), pattern. draw('triangle', '#ffce56'), pattern. draw('square', '#1f77b4'), pattern. draw('circle', '#ff7f0e'), pattern. draw('diamond', '#2ca02c'), pattern. draw('zigzag-horizontal', '#17becf'), pattern. draw('triangle', '#7f7f7f') . . .

12. Brug mønstre

Det er ikke svært at anvende et mønster. Som vist ovenfor skal du blot instantiere dem ved hjælp af navnet fra figuren og en farveskærm, der skal bruges som baggrund. Sørg for, at matrixen indeholder nok elementer til at dække hvert medlem af datafeltet.



13. Løs problemer med værktøjstip

Værktøjstip-vinduet kan ikke skelne farveoplysninger i øjeblikket

hvordan man bruger en huion tablet
Værktøjstip-vinduet kan ikke skelne farveoplysninger i øjeblikket

At køre programmet med aktiverede udviklerværktøjer finder et interessant problem. Når du fører musemarkøren over kortelementerne, vises der fejl. Dette skyldes værktøjstip-vinduet, som ikke er i stand til at skelne farveinformation fra pie-elementer, der er fyldt med et mønster.



hvordan man rammer dit eget kunstværk

14. Overskriv oplysninger

Det aktuelle problem kan løses ved at tilsidesætte dele af værktøjstipens element. Chart.js lader dig indsende begivenhedshåndterere, der bliver kaldt, når et værktøjstip-vindue dukker op - overskrivning labelFarve deaktiverer snooping-algoritmen, der er ansvarlig for udsendelsen af ​​advarslen set før.

chart = new Chart(ctx, { type: 'pie', options: { maintainAspectRatio:false, tooltips: { callbacks: { labelColor: function(tooltipItem, chart) { return { borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(255, 0, 0)' } }, labelText Color:function(tooltipItem, chart){ return '#543453'; } } } }, data: mypie });

15. Tilføj en titel

Især når diagrammer er beregnet til eksport eller lagring, forbedrer tilføjelsen af ​​en titel meningsfuldheden af ​​de viste oplysninger. Koden vist ved siden af ​​dette trin tager sig effektivt af problemet - yderligere tilpasning, såsom valg af skrifttyper, kan udføres med yderligere parametre.

var chart = new Chart(ctx, { type: 'line', options: { title: { display: true, text: 'Line Chart' } }, data: myfield

16. Tilføj endnu et diagram

Sørg for at medtage Labels-arrayet på dette tidspunkt



Sørg for at medtage Labels-arrayet på dette tidspunkt

Indtil videre var vores diagrammer begrænset til en smule information ad gangen. Tilføjelse af et andet 'niveau' til et datafelt motiverer Chart.js til at oprette et diagram, der består af mere end et datasæt. Det Mærkater array er vigtigt, da dets udeladelse får programmet til at springe dele over dataene over.

var myfield2 = { labels: ['1', '2', '3', '4', '5', '6', '7'], datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }, { label: 'My second dataset', fillColor: 'rgba(151,187,205,0.2)', strokeColor: 'rgba(151,187,205,1)', data: [28, 33, 40, 19, 12, 27, 9] }] };

17. Udfyld dataarrayet

At generere etiketens array kan blive kedeligt. Hvis dine oplysninger kommer fra et sted, hvor ordinær information er let tilgængelig, kan dataarrayen også udfyldes med en række Punkt[] felter. I dette tilfælde skal du bruge syntaksen vist nedenfor.

hvordan man opretter lave poly-modeller
data: [{ x: 10, y: 20 }, { x: 15, y: 10 }]

18. Juster placering af diagrammer

Ovennævnte afstandsproblem gør placeringsdiagrammer vanskelige. Chart.js løser dette problem via padding-attributten, der findes i indstillingsfeltet - det giver dig mulighed for at erklære en ude-zone på hver af de fire margener i containeren og derved begrænse gengivelsen.

var chart = new Chart(ctx, { type: 'line', options: { layout: { padding: { left: 30, right: 30, top: 30, bottom:30 } },

19. Indstil layoutet globalt

Det er kedeligt at tildele layoutindstillinger til hvert diagram. En smartere tilgang involverer Chart.defaults.global element. Det udsætter standardindstillingerne, som Chart.js vil bruge til nye diagrammer og kan gemme en masse kode, hvis der skal hostes flere diagrammer ved siden af ​​hinanden.

document.addEventListener('DOMContentL oaded', function(){ Chart.defaults.global.layout = { padding: { left: 30, right: 30, top: 30, bottom: 30 } };

20. Se på eksempler

Chart.js-udviklerne leverer en eksempel s for at vise rammen i aktion. Se på de forskellige muligheder - kildekoden er normalt kommenteret godt. Biblioteket leveres også med ekstremt detaljeret dokumentation . Du skal blot åbne den i en browser, du vælger, og navigere til den sektor, der interesserer dig mest.

Denne artikel blev oprindeligt offentliggjort i det kreative webdesignmagasin Web Designer. Køb nummer 281 eller abonner her .

Læs mere:

  • 1
  • to

Nuværende side: Brug af Chart.js: Trin 11-20

hvordan man bruger pensel i Photoshop
Forrige side Brug af Chart.js: Trin 01-10