Cara menggunakan chart animation javascript

Question

I’m creating a radar chart using Chart.js. I want to start the animation when you click a button from the menu. Right now it starts when you load the site.

Here is the actual script:

var radarChartData = {
    labels : ["Html5","Responsive","LESS","SASS","JavaScript","WordPress","Git","WebGL","LAMP","CSS3","User Interface Design","SEO","Web applications"],
    datasets : [{
        fillColor : "rgba(255,255,255,0.5)",
        strokeColor : "rgba(250,250,250,1)",
        pointColor : "rgba(255,255,255,1)",
        pointStrokeColor : "#fff",              
        data : [100,100,80,80,80,70,50,30,100,100,80,70,70]
    }]          
}

var myRadar = new Chart(document.getElementById("skill-radar").getContext("2d"))
    .Radar(radarChartData, {
        scaleShowLabels : true,
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 10,
        scaleLineColor : "rgba(250,250,250,.5)",
        angleLineColor : "rgba(250,250,250,.3)",
        scaleFontFamily : "'Exo'",
        scaleFontColor : "#fff",
        scaleFontSize : 10,
        scaleBackdropColor : "rgba(0,0,0,0.75)",
        pointLabelFontFamily : "'Exo'",
        pointLabelFontSize : 16,
        pointLabelFontColor : "#fff",
        animationEasing : "easeOutSine",
        animationSteps : 100,
        pointLabelFontSize : 10
});

var chartJsConstruct = function(){
//..your chart.js invocation with 'new' as shown above
new Chart(document.getElementById("skill-radar").getContext("2d"))
    .Radar(radarChartData, {
        scaleShowLabels : true,
        scaleOverride : true, 
        scaleSteps : 10, 
        scaleStepWidth : 10, 
        scaleLineColor : "rgba(250,250,250,.5)", 
        angleLineColor : "rgba(250,250,250,.3)", 
        scaleFontFamily : "'Exo'", 
        scaleFontColor : "#fff", scaleFontSize : 10, 
        scaleBackdropColor : "rgba(0,0,0,0.75)", 
        pointLabelFontFamily : "'Exo'", 
        pointLabelFontSize : 16, 
        pointLabelFontColor : "#fff", 
        animationEasing : "easeOutSine", 
        animationSteps : 100, 
        pointLabelFontSize : 10
    });
};

var skillsLink = document.getElementById('ui-id-2'); // find the target to add behavior

// add behavior agnostic of browser
if (skillsLink.addEventListener){// for Non-IE browsers
    skillsLink.addEventListener('click', chartJsConstruct);
} else if(skillsLink.attachEvent){// for IE9 and below
    skillsLink.attachEvent('onclick', chartJsConstruct);
}

Sekarang kali ini untuk membuat grafik batang . Bagan atau Grafik sebagian besar digunakan di situs backend atau panel admin, terkadang kami harus menunjukkan data kepada pengguna kemudian kami menggunakannya di frontend juga. Pada dasarnya, bagan merupakan bagian penting dari pengembangan web .

bagaimana menemukan kode tautan di roku tv saya

Hari ini Anda akan belajar membuat Diagram Batang menggunakan jQuery . jQuery adalah Pustaka JavaScript , itu sebabnya saya menyebut ini sebagai program JS . Pada dasarnya, Perpustakaan dibuat untuk pekerjaan yang mudah dilakukan. Anda dapat menggunakan ini grafik batang di mana saja seperti yang Anda inginkan, ini adalah program yang sangat sederhana dan mudah. Anda hanya perlu membuat div baru seperti bar lain dan harus meletakkan persentase nilai-nilai.

Jadi, Hari Ini Saya Berbagi Grafik Batang Animasi JavaScript , KE Bagan Batang jQuery Dengan Animasi . Program ini sangat singkat tetapi bermanfaat, Anda dapat membuatnya dengan mudah setelah memahami kode-kodenya. Anda dapat menempatkannya di mana saja sebagai kebutuhan Anda. Ini memiliki sangat cantik dan datar BAWANG , Anda dapat melakukan reskin dengan mudah.

Jika Anda berpikir sekarang bagaimana ini JavaScript Grafik Batang sebenarnya, lalu lihat pratinjau diberikan di bawah.

Pratinjau Bagan Batang Dengan Animasi

Lihat pratinjau video ini untuk mendapatkan gambaran tentang bagaimana ini grafik terlihat seperti .

Sekarang Anda dapat melihat ini secara visual. Jika Anda suka ini, dapatkan Kode sumber dari itu.

Kode Sumber Grafik Batang Animasi JavaScript

Sebelum berbagi kode sumber , mari kita bicarakan. Saya telah membuat div terpisah untuk setiap bilah, dan rentang untuk menunjukkan persentase. HTML bekas Data-* atribut untuk menyimpan nilai khusus sebagai nilai persentase. Akhirnya disimpan persentase nilai seperti ini :>

Sekarang HTML lengkap dengan bar, persentase, label terlihat seperti ini:NamaDalam CSS file saya telah mengatur semua posisi, warna, font, dll . Saya telah menggunakan font google untuk membuat program ini. Sekarang jQuery atau JavaScript mengambil data-persen atribut, sekarang jquery mendorong backgound sesuai dengan nilai persentase yang diberikan.

Latar belakang terisi dengan penundaan 2 detik, yang menciptakan efek animasi . Seperti yang Anda lihat di pratinjau, satu bilah memiliki gelap warna & lainnya memiliki lampu warna. Untuk membuat ini, saya telah menggunakan properti CSS :nth-of-type(odd).

Ada banyak perintah dasar, saya tidak bisa menjelaskan semuanya secara tertulis. Anda akan memahami ini dengan mudah setelah mendapatkan kode . Untuk membuat program ini. Anda harus membuat 3 file, pertama untuk HTML , kedua untuk CSS , dan ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat ini tanpa kesalahan.

index.html

Buat file HTML bernama ' index.html ' dan letakkan kode-kode ini di bawah ini.

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

style.css

Sekarang buat file CSS bernama ' style.css ' dan letakkan kode-kode ini yang diberikan di sini.

tanggal dan waktu saat ini dalam html

/** 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; } h2 { 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

Langkah terakhir, buat file JS untuk jQuery bernama ‘ function.js ' dan masukkan kodenya.

/** 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)

Itu dia. Sekarang Anda telah berhasil membuat Grafik Batang Animasi JavaScript , Bagan Batang Dengan Animasi . Jika Anda menyukai posting ini, bagikan dengan semua teman pemrograman Anda! Terima kasih!

Awalnya diterbitkan pada https://webdevtrick.com

#javascript #html #css #jquery #graphql

kode javascript Chartjs