Käännä tietoja vuorovaikutteisiin kaavioihin

Sep 16, 2025
Miten tehdään

Teoriassa luodaan kaaviot eivät ole vaikeita. Pie kaaviolle vaaditun trigonometrian käsittely on kaikkein klassisia työpaikkoja, joita käytetään ohjelmoijien koulutukseen. Kehittäjien huomautuksia on paljon, mutta tässä artikkelissa keskitymme siihen, miten voit käyttää avoimen lähdekoodin kellonaikaa.

Laitamme kirjaston läpi askeleensa luomalla joukko tulostettavia kaavioita satunnaisesti luotuista tiedoista. Char.js on erityisen suosittu Web-suunnittelutyökalu Koska se tarjoaa ainutlaatuisen kompromission helppokäyttöisyyden ja edistyksellisten ominaisuuksien välillä, mikä mahdollistaa vuorovaikutteisten kaavioiden ja sitoutumisen Infographics .

Chart.js-ohjelmalla voit valita kahdeksasta eri kaavion tyypistä lisätä verkkosivustoihisi vähäisillä vaivalla. Äskettäin lisätty animaatio moduuli rikastuttaa kaavioita, joissa on snazzy näköisiä kuvia. Uuden sivuston luominen kaavioiden taloon? Saada sivujen ylläpito paikalla ja muista kokeilla yläreunaa Verkkosivuston rakentaja . Okei, aloitetaan.

Napsauta kuvaketta jokaisen kuvan oikeassa yläkulmassa suurentaaksesi sitä.

01. Asenna kirjasto

Kuvion käyttö on laajalle levinnyt, löydät sen kaivettu versio eri CDN: stä, kuten Cloudflareista. Vain lataa se a & lt; skripti & gt; Tunniste ja varmista, että a & lt; canvas & gt; Object on lähellä - Chart.js tekee sen taikuutta käyttämällä tässä widgetissä tarjottua renderointiinfrastruktuuria. 

 & lt; html & gt;
& lt; pää & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Chart.min.js "& gt;
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "workara" & gt;
& lt; / canvas & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Aloita alustus

First, load up the framework

Lata ensin kehys

Kun kehys on ladattu, seuraava vaihe koskee CANVAS2D-kahvan saamista & lt; canvas & gt; Esimerkki, joka on luotu edellisessä vaiheessa. Tätä voidaan sitten käyttää luomaan uusi esimerkki Kartoittaa() Luokka, joka vastaa tiedon käsittelystä, tekemisestä ja vuorovaikutuksesta. 

 & lt; skripti & gt;
(Toiminto () {
var ctx = asiakirja.
getelementbyid ("workara"). getcontext ('2d');
var chart = uusi kaavio (CTX,
{
Tyyppi: "Line",
Vaihtoehdot: {},
. . .
});
}) ();
& lt; / script & gt;

03. Lisää tietolähde

line chart

Line-kaaviomme varten tarvitaan vain yksi tietokanta

Kaavioluokat Ota tietojen osoitin, joka tarjoaa yhden tai useamman Tietokanta Todelliset mittaustiedot sisältävät esineet. Viivakaavion tapauksessa tarvitaan vain yksi tietokanta. Siinä on pakollinen tietoelementti ja muutamia valinnaisia ​​parametreja, jotka koskevat todellista näyttöprosessia. 

 var chart = uusi kaavio (CTX, {
Tyyppi: "Line",
Vaihtoehdot: {},
Tiedot: {
Etiketit: ["tammikuu",
"Helmikuu", "maaliskuu", "huhtikuu", "toukokuu", "kesäkuu",
"Heinäkuu"],
Tietokanta: [{
Label: "ensimmäinen tietokanta",
taustaväri:
        "RGB (255, 99, 132),
reunuksen väri:
"RGB (255, 99, 132),
Tiedot: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Pysäytä kaikki vilkkuu

Chart.js mukana hienostunut koon logiikkaa, joka - valitettavasti - taipumus saada näytön koko väärä aika ajoin. Rajoittamalla koko & lt; canvas & gt; Elementti CSS: n kautta valitettavasti, ei tee temppua. Sen sijaan sekä kuvasuhteen ylläpito että reagointi on poistettava käytöstä kaavion rakentajan mukana olevien vaihtoehtojen kautta. 

 & lt; canvas id = "workara" tyyli = "Leveys: 800px;
Korkeus: 600px; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; skripti & gt;
(Toiminto () {
var ctx = asiakirja.
getelementbyid ("workara"). getcontext ('2d');
var chart = uusi kaavio (CTX,
{
Tyyppi: "Line",

Vaihtoehdot: {
RECATIVE: FALSE, SEPTYASECTRATIO:
FALSE},

05. Lisää asetteluja

Parafraasi Andrei Tupolev: nyt, että pieni on lentävä, saakaamme suuremman. Tämän vaiheen "kertoo" Kaaviomme, joka sisältää yhden kangaselementin kanssa, luodaan nyt yhteensä neljä niistä ja järjestämme ne näytöllä tavalla, joka on samanlainen kuin lecroy oskilloskooppi. Valitettavasti tämä ei täysin toimi kuin tarkoitettu. 

 & lt; canvas id = "workara"
Style = "Asema: Absoluuttinen, yläreunus: 0%; vasen: 0%;
Leveys: 49%; Korkeus: 49%; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; canvas id = "workara2"
Style = "Asema: Absoluuttinen, yläreunus: 0%; vasen: 51%;
Leveys: 49%; Korkeus: 49%; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; canvas id = "workara3"
Style = "Asema: Absoluuttinen, yläreunus: 51%; vasen: 0%;
Leveys: 49%; Korkeus: 49%; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; canvas id = "workara4"
Style = "Asema: Absoluuttinen, yläreunus: 51%; vasen: 51%;
Leveys: 49%; Korkeus: 49%; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;

06. Tame kaikki renderointivirheet

Wrapper <div> tags enforce a structure from the outside

Kääre & lt; div & gt; Tunnisteet valvovat rakennetta ulkopuolelta

Turvallisin tapa käsitellä kaavioita monimutkaisissa layoutissa käsittää kääreen & lt; div & gt; Tunnisteet. Ne valvovat rakennetta ulkopuolelta, mikä varmistaa, että sisäinen ulkoasu moottori ei voi tehdä enemmän haittaa kuin on tarpeen. Tällöin varmistaa kuitenkin reagointi-ominaisuuden uudelleen käyttöön. 

 & lt; div style = "Asema: Absoluuttinen, yläreunus: 0%; Vasen:
0%; Leveys: 49%; Korkeus: 49%; "& gt;
& lt; canvas id = "workara" & gt; & lt; / canvas & gt;
Canvas & GT;
& lt; / div & gt;
& lt; div style = "asento: absoluuttinen; alkuun: 0%; Vasen:
51%; Leveys: 49%; Korkeus: 49%; "& gt;
& lt; canvas id = "workara2" & gt; & lt; / canvas & gt;
Canvas & GT;
& lt; / div & gt;
& lt; div style = "Asema: Absoluuttinen, yläreunus: 51%; vasen:
0%; Leveys: 49%; Korkeus: 49%; "& gt;
& lt; canvas id = "workara3" & gt; & lt; / canvas & gt;
Canvas & GT;
& lt; / div & gt;
& lt; div style = "Asema: Absoluuttinen, yläreunus: 51%; vasen:
51%; Leveys: 49%; Korkeus: 49%; "& gt;
& lt; canvas id = "workara4" & gt; & lt; / canvas & gt; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; skripti & gt;
document.addeventListener ("domcontentl
oaded ", toiminto () {
var ctx = asiakirja.
getelementbyid ("workara"). getcontext ('2d');
var chart = uusi
Kaavio (CTX, {
tyyppi:
'linja',
Vaihtoehdot:
{},

07. Kokeile baareja

Creating bar charts is simple

Viivakaavioiden luominen on yksinkertainen

Aina Rendering Line -kaaviot saavat tylsiä nopeasti. Let's kuuseen asioita muuttamalla tyyppi ominaisuus palkkiin, jolloin saadaan viivakaaviot, kuten tämän vaiheen mukana olevassa kuvassa esitetty kuva. Edistetään tietokenttä "maailmanlaajuiseen" soveltamisalaan uudelleenkäytön poistamiseksi. 

 & lt; script & gt;
document.addeventListener ("domcontentloadoitu", toiminto () {
var myfield = {
Etiketit: ["tammikuu", "helmikuu", "maaliskuu", "huhtikuu", "toukokuu", "kesäkuu", "heinäkuu"],
Tietokanta: [{
Label:
"Ensimmäinen tietokanta",

BackgroundColor: "RGB (255, 99, 132)",

Bordercolor: "RGB (255, 99, 132),
Tiedot: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = Asiakirja.
getelementbyid ('workara4'). getcontext ('2d');
Kuvio = uusi kaavio (CTX, {
Tyyppi: "Bar",
Vaihtoehdot: {},
Tiedot: MyField
});
});
& lt; / script & gt;

08. Vältä piirauksia

pie charts taking over the screen

Pie Charts vaatii erityistä hoitoa, jos et halua, että ne täyttävät koko näytön

Teoriassa voidaan yhdistää samoja viivoja pitkin. Poista väriominaisuudet yhtenäisen ulkoasun estämiseksi ja asettaa tyypin ominaisuus piirakka. Valitettavasti tämä ei täysin toimi - kun se on tehty, piirakas kaavio täyttää koko näytön. Tämä johtuu piirakka-alueen erikoispiirteestä, joka käyttää näiden kahden ominaisuuden "suurempia" määrittämään piirakka säteellä. 

 var mypie = {
Etiketit: ["tammikuu", "helmikuu", "maaliskuu", "huhtikuu", "toukokuu", "kesäkuu", "heinäkuu"],
Tietokanta: [{
Label: "ensimmäinen tietokanta",
Tiedot: [0, 10, 5, 2, 20, 30, 45],
}]
};
CTX = Document.getElementbyID ('WorkRea2').
getconteksti ('2d');
Kuvio = uusi kaavio (CTX, {
Tyyppi: "piirakka",
Vaihtoehdot: {},
Tiedot: Mypie
});

09. Ratkaise ongelma

Avaa vaiheessa 1 luotu "index.js" -tiedosto 1. Aloita määrittämällä kaaviotyyppi rivinä ja lisäämällä dataa visuaalisesti esitetyllä tavalla. 

 & lt; body & gt;
& lt; div style = "asento: absoluuttinen; alkuun: 0%;
Vasen: 0%; Leveys: 49%; Korkeus: 49%; "& gt;
& lt; canvas id = "workara" & gt; & lt; /
Canvas & GT; & lt; / Canvas & GT;
& lt; / div & gt;
& lt; div style = "asento: absoluuttinen; alkuun: 0%;
Vasen: 51%; Leveys: 29%; Korkeus: 49%; "& gt;
& lt; canvas id = "workara2" & gt; & lt; /
Canvas & GT; & lt; / Canvas & GT;
& lt; / div & gt;

10. Anna char.js rescale kaavio

Toinen lähestymistapa ongelman ratkaisemiseksi edellyttää uudelleen käytöstä ylläpitää kuvasuhde ominaisuus.Tällä tavoin kaaviomollisen moottorin on voitava irrottaa kaavio, koska se näkee sopivaksi, varmistaen, että koko ympyrä näkyy näytöllä. 

 CTX = document.gettelementbyid ('workara2').
getconteksti ('2d');
Kuvio = uusi kaavio (CTX, {
Tyyppi: "piirakka",
Vaihtoehdot: {SYNENTASPECTRATIO: FALSE
},
Tiedot: Mypie
});

Seuraava sivu: Lopeta interaktiivisen kaavion luominen char.js

  • 1
  • 2

Tämänhetkinen sivu: KATSOIDEN käyttäminen: Vaiheet 01-10

Miten tehdään - Suosituimmat artikkelit

Aloita Artrage

Miten tehdään Sep 16, 2025

(Kuva luotto: Steve Goad) Aloita Artrage 01. Hanki käyttöön Artrage ..

Kuinka luoda 3D-skannaus todellisuuden kaappauksella

Miten tehdään Sep 16, 2025

(Kuva luotto: Phil Nolan) Reality Capture on erinomainen tapa tehdä oma 3D-skannaus. Tarvitset vain kamerasi ja voit..

Kuinka ratkaista hankala suunnittelu lyhyt

Miten tehdään Sep 16, 2025

[Kuva: Jack Renwick Studio] Jos joku osaa käsitellä hankalaa lyhyesti, se on Jack Renwick Studio -hotellin älykkä..

Nestemäisten vaikutusten luominen WebGL: llä

Miten tehdään Sep 16, 2025

Monet web-suunnittelijat etsivät tapoja lisätä suuria vaikutuksia sivuston suunnitteluun, jotta he tarttuvat käyttäjiensä h..

5 Asiat, joita tarvitset öljymaalaukseen

Miten tehdään Sep 16, 2025

Siellä on perusteltua mystiikkaa ympäri öljymaalausta, joka on asettanut joitain taiteilijoita tutkimalla niitä. Jos tiedät ..

Lataa tiedostot 3D-maailmalle 232

Miten tehdään Sep 16, 2025

Jos haluat ladata mukana olevat tiedostot 3D-maailman numeroon 232, napsauta kunkin artikkelin alla olevaa linkkiä ja Zip-tiedos..

Kuinka luoda sarjakuvahahmot elokuvassa 4D

Miten tehdään Sep 16, 2025

MOBILE-pelien ja Indien kanssa Videopelit , on ollut suuria kuvittelijöitä ja animaattoreita 3D-taide ..

Rakenna verkkokauppasivusto tyhjästä

Miten tehdään Sep 16, 2025

Ecommerce on tullut niin suosittu viime vuosina, nyt on vaikea kuvitella tulevaisuutta ilman sitä. Internetin voima on tehnyt yh..

Luokat