Andmete interaktiivseteks skeemideks muutmiseks kasutage diagrammi.js

Leht 2/2: Chart.js kasutamine: sammud 11–20

11. Parandage pirukate värvimist

Mustrite lisamine muudab teie graafikud kättesaadavaks värvipimedatele kasutajatele

Mustrite lisamine muudab teie graafikud kättesaadavaks värvipimedatele kasutajatele

Chart.js ei sisalda juhuslikku värvigeneraatorit - kui te ei esita värvimassiivi, ei muutu värvid. Kuna puhtalt värvidel põhinevate süsteemide kujundamine on ebaefektiivne - paljud inimesed kannatavad värvipimeduse all. Kena viis probleemi lahendamiseks on mustrihäire raamatukogu.

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. Kasutage mustreid

Tegelikult pole mustri rakendamine keeruline. Nagu ülalpool näidatud, ühendage need lihtsalt joonisel oleva nime ja taustana kasutatava värviekraani abil. Veenduge, et massiiv sisaldab piisavalt elemente andmevälja iga liikme katmiseks.

13. Käsitlege tööriistavihjega seotud probleeme

Tööriistavihje aken ei suuda värviteavet praegu eristada

Tööriistavihje aken ei suuda värviteavet praegu eristada

Programmi käivitamine lubatud arendaja tööriistadega leiab huvitava probleemi. Kui liigutada hiirekursor diagrammi elementide kohale, ilmuvad vead. Selle põhjuseks on tööriistavihku aken, mis ei suuda mustriga koormatud pirukate elementidest värvi teavet eristada.

14. Kirjutage teave üle

Kõnealust probleemi saab parandada, kui tühistada tööriistavihje elemendi osad. Chart.js võimaldab teil esitada sündmuste käitlejaid, mida kutsutakse tööriistaviha aknana - see kirjutatakse üle siltColor keelab varem nähtud hoiatuse väljastamise eest vastutava nuhkimisalgoritmi.

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. Lisage pealkiri

Eriti kui skeemid on ette nähtud eksportimiseks või salvestamiseks, parandab pealkirja lisamine kuvatud teabe mõttekust. Selle sammu kõrval näidatud kood hoolitseb probleemi eest tõhusalt - täiendavaid parameetreid kasutades on võimalik täiendavat kohandamist, näiteks fontide valimist.

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

16. Lisage veel üks diagramm

Lisage sellesse punkti kindlasti massiivid Labels

Lisage sellesse punkti kindlasti massiivid Labels

Siiani piirdusid meie diagrammid korraga ühe teabe bitiga. Teise taseme lisamine andmeväljale motiveerib Chart.js-i looma diagrammi, mis koosneb rohkem kui ühest andmekogumist. The Sildid massiiv on oluline, kuna selle väljajätmine paneb programmi osa andmeid vahele jätma.

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. Täitke andmemassiiv

Sildi massiivi genereerimine võib muutuda tüütuks. Kui teie teave pärineb kusagilt, kus tavaline teave on hõlpsasti kättesaadav, saab andmemassiivi täita ka massiiviga Punkt [] väljad. Sellisel juhul kasutage allpool näidatud süntaksit.

data: [{ x: 10, y: 20 }, { x: 15, y: 10 }]

18. Reguleerige graafikute paigutust

Eespool nimetatud vaheprobleem muudab positsioneerimisskeemid keeruliseks. Chart.js tegeleb selle probleemiga valikuväljal leitud atribuudi kaudu - see võimaldab teil deklareerida hoidmispiirkonna konteineri neljas servas, piirates seeläbi renderdamist.

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

19. Määrake paigutus globaalselt

Igale skeemile paigutussätete määramine on tüütu. Nutikam lähenemine hõlmab Chart.defaults.global element. See paljastab vaikeseaded, mida Chart.js uute diagrammide jaoks kasutab, ja võib salvestada palju koode, kui üksteise kõrval on mitu diagrammi.

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

20. Vaadake näiteid

Chart.js arendajad pakuvad a eeskuju s raamistiku näitamiseks tegevuses. Heitke pilk erinevatele võimalustele - lähtekoodi kommenteeritakse tavaliselt hästi. Ka raamatukogu tuleb kaasa äärmiselt üksikasjalik dokumentatsioon . Lihtsalt avage see valitud brauseris ja liikuge sektorisse, mis teid kõige rohkem huvitab.

See artikkel ilmus algselt loomingulises veebidisaini ajakirjas Web Designer. Osta väljaanne 281 või telli siin .

Loe rohkem:

  • 1
  • kaks

Käesolev lehekülg: Chart.js kasutamine: sammud 11–20

Eelmine leht Chart.js kasutamine: toimingud 01–10