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

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

راهنمای نصب Chart.js
برای نصب این لایبرری از طریق npm یا bower، صرفاً کافی است تا یکی از دستورات زیر را در ترمینال وارد کنید:

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

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

<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 لایبرری دیگری را می‌شناسید که می‌تواند به طراحان وب در طراحی چارت‌ها و نمودارهای حرفه‌ای کمک کند، در بخش نظرات این پست می‌توانید با سایر کاربران سکان آکادمی به اشتراک بگذارید.)

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