Palični grafikoni z animacijo z uporabo JavaScript, HTML in CSS

Blog

Palični grafikoni z animacijo z uporabo JavaScript, HTML in CSS

Zdaj tokrat do ustvarite stolpčni graf . Grafikon ali grafikoni se večinoma uporabljajo na zalednem spletnem mestu ali na skrbniški plošči, včasih moramo podatke prikazati uporabnikom, nato pa jih uporabljamo tudi na sprednji strani. V bistvu je grafikonu je pomemben del spletni razvoj .

kako naj govorim z nekom v Quickbooks

Danes se boste naučili ustvarjati Uporaba stolpnega grafikona jQuery . jQuery je Knjižnica JavaScript , zato temu pravim a JS program . Knjižnice so v bistvu ustvarjene za enostavna dela. To lahko uporabite stolpčni graf kjer koli želite, je to zelo preprost in enostaven program. Ustvariti morate nov div, tako kot druge palice, in ga postaviti odstotek vrednote.

Torej, danes delim JavaScript animirani stolpčni grafikon , TO JQuery stolpčni grafikon z animacijo . Ta program je zelo kratek, vendar uporaben, to lahko preprosto ustvarite, ko razumete kode. Po želji ga lahko postavite kamor koli. Ima zelo lepo in ravno ČEBELA , lahko preprosto oživite.

Če zdaj razmišljate, kako to JavaScript Črtni grafikon dejansko je, potem si oglejte predogled podano spodaj.

Predogled stolpnega grafikona z animacijo

Oglejte si video predogled, če želite izvedeti, kako je to grafikon izgleda tako .

Zdaj lahko to vidite vizualno. Če vam je to všeč, si priskrbite izvorna koda svojega.

Izvorna koda JavaScript animiranega stolpca

Prej deljenje izvorne kode , pogovorimo se o tem. Ustvaril sem ločen div za vsako vrstico in razpon za prikaz odstotka. Uporabljen HTML Podatki-* atribut za shranjevanje vrednosti po meri kot vrednosti v odstotkih. Končno shranjeno odstotek vrednosti, kot je ta:>

Zdaj celoten HTML z vrstica, odstotek, oznaka videti takole:ImeV CSS datoteko, ki sem jo uredil položaj, barve, pisava itd . Za ustvarjanje tega programa sem uporabil google pisavo. Zdaj pa jQuery ali JavaScript prinesel podatkovni odstotek atribut, zdaj jquery potisne ozadje skladno z danimi vrednostmi v odstotkih.

Ozadje se napolni z zamikom 2 sekund, kar ustvari animacijski učinek . Kot lahko vidite v predogledu, ima ena vrstica temno barva in drugo ima a svetloba barvo. Za ustvarjanje tega sem uporabil lastnost CSS: nth-of-type (odd).

Obstaja veliko osnovnih ukazov, vsega ne znam pisno razložiti. To boste potem zlahka razumeli pridobivanje kod . Za ustvarjanje tega programa. morate ustvariti 3 datoteke, najprej za HTML , drugi za CSS , tretji za JavaScript . Sledite korakom, da to ustvarite brez napak.

index.html

Ustvarite datoteko HTML z imenom ' index.html 'In spodaj vnesite te kode.

 JavaScript Animated Bar Graphs | Webdevtrick.com HTML CSS JavaScript jQuery Bootstrap React Vue Angular CMS Node JS 

style.css

Zdaj ustvarite datoteko CSS z imenom ' style.css 'In vnesite te kode, navedene tukaj.

pretvori json v csv python pandas
/** Code By Webdevtrick ( https://webdevtrick.com ) **/ * { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; font-family: 'Electrolize', sans-serif; } body { color: #212121; -webkit-font-smoothing: antialiased; padding: 2%; line-height: 1; } h1 { font-weight: bold; text-align: center; font-size: 1.5em; padding: .5em 0; margin-bottom: 1em; border-bottom: 2px solid #212121; letter-spacing: 3px; text-transform: uppercase; } .wrap { width: 50%; margin: 0 auto; } .bar { background: #ff413d; width: 0; margin: .25em 0; color: #fff; position: relative; transition: width 2s, background .2s; -webkit-transform: translate3d(0, 0, 0); clear: both; } .bar:nth-of-type(odd) { background: #ff6461; } .bar .label { font-size: .75em; padding: 1em; background: #212121; width: 7em; display: inline-block; position: relative; z-index: 2; font-weight: bold; } .bar .label.second { background: #333; } .count { position: absolute; right: .25em; top: .75em; padding: .15em; font-size: .75em; font-weight: bold; } 

function.js

Zadnji korak je ustvariti datoteko JS za jQuery z imenom ' function.js 'In vnesite kode.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/ setTimeout(function start (){ $('.bar').each(function(i){ var $bar = $(this); $(this).append('') setTimeout(function(){ $bar.css('width', $bar.attr('data-percent')); }, i*100); }); $('.count').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).parent('.bar').attr('data-percent') }, { duration: 2000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now) +'%'); } }); }); }, 500) 

To je To. Zdaj ste uspešno ustvarili JavaScript animirani stolpčni grafikon , Palični grafikon z animacijo . Če vam je bila ta objava všeč, jo delite z vsemi sodelavci v programiranju! Hvala vam!

Prvotno objavljeno dne https://webdevtrick.com

#javascript #html #css #jquery #graphql