Chart.js: لایبرری جاوااسکریپتی ساخت چارت و نمودار

Chart.js: لایبرری جاوااسکریپتی ساخت چارت و نمودار

امروزه بسیاری از وب‌سایت‌ها و اپلیکیشن‌های موبایل را می‌بینیم که برخی از داده‌های خود را از طریق نمودارها در معرض دید کاربران خود قرار می‌دهند. با توجه به رشد بی‌سابقهٔ تمایل توسعه‌دهندگان و طراحان به استفاده از نمودارها، لایبرری‌های جاوااسکریپتی زیادی را می‌بینیم که طراحی شده‌اند تا فرایند استفاده از نمودارها در برنامه‌های مختلف را به ساده‌ترین شکل ممکن امکان‌پذیر سازند. در همین راستا، در این پست قصد داریم به معرفی لایبرری Chart.js بپردازیم که یکی از بهترین نمونه‌ها در نوع خود است.

در HTML5 شاهد عرضهٔ تگ جدیدی تحت عنوان <canvas> بودیم که این تگ امکانات بسیار زیادی را در اختیار طراحان سایت قرار می‌دهد. Chart.js هم با استفاده از این تگ، امکانات زیادی را در اختیار توسعه‌دهندگان قرار می‌دهد که از آن جمله می‌توان ادغام نمودارهای خطی و میله‌ای برای نمایش بهتر داده‌ها، نمایش نمودارهایی با داده‌های پیچیده، ترنزیشن‌های مختلف برای آپدیت رنگ‌ها، داده‌ها و ... اشاره کرد. برای نصب Chart.js از طریق npm یا bower، صرفاً کافی است تا دستورات زیر را در ترمینال وارد کنید:

npm install chart.js --save
bower install Chart.js --save

اگر هم که می‌خواهید از CDN این لایبرری استفاده کنید، می‌توانید از لینک زیر استفاده نمایید:

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js

به عنوان نمونه کد این لایبرری خواهیم داشت:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Chart.js اپن‌سورس بوده و در صورتی که علاقمند به توسعهٔ آن هستید، می‌توانید در بهبود این پروژه از طریق ریپازیتوری گیت‌هاب چارت‌جی‌اس مشارکت کنید.

در صورتی که به غیر از Chart.js لایبرری دیگری را می‌شناسید که می‌تواند به طراحان وب در طراحی چارت‌ها و نمودارهای حرفه‌ای کمک کند، در بخش نظرات این پست می‌توانید با سایر کاربران سکان آکادمی به اشتراک بگذارید.