۳ کتابخانه معروف برای رسم نمودار در جاوااسکریپت

یکی از قابلیت‌های نمودار‌ها این است که اطلاعاتی که از داده‌های ما برداشت می‌شود را خیلی قابل فهم‌تر می‌کنند.

نمودارها از این نظر اهمیت دارند که هم به ما کمک می‌کنند داده‌های خود را به مخاطب نشان دهیم هم وب‌سایت خود را با این روش جذاب‌تر بکنیم.

ارائه‌های تصویری هم تجزیه‌وتحلیل داده‌های بزرگ و همچنین انتقال اطلاعات این داده‌ها را آسان‌تر می‌کند.کتابخانه‌های رسم نمودار در جاوااسکریپت شما را قادر می‌سازد که داده‌های خود را به صورت تصویری و با ظاهری جذاب و قابل‌درک و‌ قابل‌فهم به مخاطب نشان دهید و همچنین باعث می‌شود که طراحی سایت شما زیباتر شود.

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

Chart.js .1

این کتابخانه یک کتابخانه منبع باز و آزاد جاوااسکریپتی است که به شما اجازه می‌دهد نمودار‌هایی با انیمیشن‌های زیبا و جذاب برای صفحات و اپلیکیشن‌های خود بسازید. این کتابخانه تحت مجوز MIT در دسترس می‌باشد.

شما با استفاده از این کتابخانه می‌توانید تعداد زیادی نمودار زیبا بسازید که این نمودار‌ها شامل: نمودار‌های خطی، میله‌ای، دایره‌ای، پراکندگی می‌باشد . این نمودارها کاملا واکنش‌گرا می‌باشند و در تمام دستگاه‌ها به خوبی نمایش داده می‌شوند و در ساخت این نمودار‌ها از عنصر canvas که در html5 وجود دارند استفاده شده است.

در زیر می‌توانید نمونه کدی که به وسیله این کتابخانه یک نمودار خطی ساخته می‌شود را ببینید. برای استفاده از کتابخانه در این کد از لینک cdn برای برقراری ارتباط با کتابخانه استفاده شده است وهمچنین تمام داده‌ها فقط برای نمایش هستند.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

<body>
   
    <canvas id="bar-chart" width=300" height="150"></canvas>

   
    <script>
     
new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],
      datasets: [
        {
          label: "Number of developers (millions)",
          backgroundColor: ["red", "blue","yellow","green","pink"],
          data: [7,4,6,9,3]
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Number of Developers in Every Continent'
      },

      scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }

    }


});

    </script>
   
   
</body>
</html>

همان‌طور که در کد بالا می‌توانید مشاهده کنید نموادر میله‌ای ساخته شده بخاطر تنظیم مقدار نوع نمودار در کد است که به صورت type:’bar’ می‌باشد. ما می‌توانیم به صورت دستی خودمان این مقدار را به مقادیر دلخواه تغییر دهیم مثلا می‌توانیم آن را به horizontalbar تغییر دهیم.

رنگ میله‌های نمودار از مقادیر موجود در آرایه رنگ‌ها تنظیم می‌شود.

رنگ و مقادیر اختصاص داده شده به نمودار از آرایه‌هایی دریافت می‌شود که کنار هم تعریف شده‌اند به عنوان مثال Latin America دومین مقدار در آرایه labels می‌باشد که رنگ آن آبی تنظیم شده است که آن هم دومین مقدار در آرایه backgroundColor می‌باشد و مقدار آن ۴ تنظیم شده است که آن‌ را از ارایه data دریافت کرده است.

۲. chartist.js

این کتابخانه ساده یکی‌دیگر از کتابخانه‌های جاوااسکریپتی است که به شما اجازه ساخت نمودار‌های زیبا و با قابلیت شخصی‌سازی می‌دهد.

یک کتابخانه متن‌‌باز و آزاد می‌باشد که تحت مجوز MIT یا WTFPL قابل دسترسی می‌باشد. این کتابخانه توسط تعداد زیادی از توسعه‌دهندگان ساخته شده است که از دیگر کتابخانه‌هایی که برای رسم نمودار وجود دارند رضایت نداشتند. بنابراین این کتابخانه ویژگی‌های زیادی را در اختیار طراحان و توسعه‌دهندگان قرار می‌دهد. بعد از اضافه کردن این کتابخانه و فایل‌های css به پروژه خود شما می‌توانید از این کتابخانه برای ساخت تعداد زیادی نمودار استفاده کنید که شامل: نمودار‌های خطی، میله‌ای، دایره‌ای و.... می‌باشد. این کتابخانه برای ساخت نمودار‌های پویا از عنصر svg استفاده می‌کند. در زیر می‌توانید نمونه کدی که به وسیله این کتابخانه یک نمودار دایره ساخته شده را ببینید.

<!DOCTYPE html>
<html>
<head>
   
    <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
   
    <style>
        .ct-series-a .ct-slice-pie {
            fill: hsl(100, 20%, 50%); /* filling pie slices */
            stroke: white; /*giving pie slices outline */          
            stroke-width: 5px;  /* outline width */
          }

          .ct-series-b .ct-slice-pie {
            fill: hsl(10, 40%, 60%);
            stroke: white;
            stroke-width: 5px;
          }

          .ct-series-c .ct-slice-pie {
            fill: hsl(120, 30%, 80%);
            stroke: white;
            stroke-width: 5px;
          }

          .ct-series-d .ct-slice-pie {
            fill: hsl(90, 70%, 30%);
            stroke: white;
            stroke-width: 5px;
          }
          .ct-series-e .ct-slice-pie {
            fill: hsl(60, 140%, 20%);
            stroke: white;
            stroke-width: 5px;
          }

    </style>
     </head>

<body>

    <div class="ct-chart ct-golden-section"></div>

    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

    <script>
       
      var data = {
            series: [45, 35, 20]
            };

      var sum = function(a, b) { return a + b };

      new Chartist.Pie('.ct-chart', data, {
        labelInterpolationFnc: function(value) {
          return Math.round(value / data.series.reduce(sum) * 100) + '%';
            }
              });
     </script>
</body>
</html>

شما به جای اینکه برای هر جز از نمودار خود استایل متفاوت بسازید می‌توانید از استایل‌های از‌ پیش ساخته شده برای تغییر در ظاهر نمودار‌های خود که در این کتابخانه وجود دارد استفاده کنید. به‌عنوان مثال شما می‌توانید از کلاس از پیش ساخته در css مانند .ct-chart استفاده کنید برای زمانی که می‌خواهید نمودار دایره‌ای بسازید. یا مثلا می‌توانید از کلاس .ct-golden-section برای این استفاده کنید که از شر محاسبات برای واکنش‌گرا کردن نمودار خود راحت شوید .برای ساخت نمودار دایره‌ای در اینجا از تابع Chartist.Pie استفاده شده است شما برای ساخت انواع دیگر نمودار‌ها باید از توابع دیگری استفاده کنید .

در زیر خروجی کد بالا را مشاهده می‌کنید :

۳. D3.js

یکی دیگر از کتابخانه‌های عالی جاوااسکریپتی برای رسم نمودار می‌باشد که تحت مجوز BSD در دسترس است. این کتابخانه عمدتا برای دستکاری کردن و همچنین تعامل با صفحه و سند ما طبق داده‌ها و اطلاعاتی است که به آن می‌دهیم. شما می‌توانید از انیمیشن‌های۳بعدی این کتابخانه با استفاده از عناصر HTML5,SVG,CSS استفاده کنید تا داده‌های شما جذاب شوند. شما با استفاده از این کتابخانه می‌توانید داده‌های خود را در صفحات وب نشان دهید همچنین از توابع پایگاه‌داده برای تغییر آن‌ها استفاده کنید.

در زیر می‌توانید نمونه‌ای ساده از نمودار میله‌ای که با استفاده از این کتابخانه ساخته شده است را مشاهده کنید.

<!DOCTYPE html>
<html>
<head>
     
    <style>
    .chart div {
      font: 15px sans-serif;
      background-color: lightblue;
      text-align: right;
      padding:5px;
      margin:5px;
      color: white;
      font-weight: bold;
    }
       
    </style>
     </head>

<body>

    <div class="chart"></div>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>

    <script>

      var data = [342,222,169,259,173];

      d3.select(".chart")
        .selectAll("div")
        .data(data)
          .enter()
          .append("div")
          .style("width", function(d){ return d + "px"; })
          .text(function(d) { return d; });
       
 
    </script>
</body>
</html>

مفهوم اصلی در استفاده از این کتابخانه مانند دیگر کتابخانه‌ها، جاوااسکریپتی مثل jquery می‌باشد؛ به این صورت که در ابتدا ما استایل مورد نظر خود را به محلی که می‌خواهیم چیزی به آن اضافه کنیم یا دستکاری کنیم می‌دهیم، سپس با عوامل دستکاری‌کننده کار خود را انجام می‌دهیم. بعد از اینکه اطلاعات ما به صفحه اضافه شد با فراخوانی تابع enter() شروع به ساختن عناصر طبق داده‌های ورودی می‌کنیم. همه‌ توابعی که بعد از این تابع هستند به ازای هر داده موجود یک‌بار فراخوانی می‌شوند.

در زیر می‌توانید نتیجه کد بالا را ببینید :

نتیجه‌گیری :

کتابخانه‌های موجود برای رسم نمودار در جاوااسکریت این قدرت را به شما می‌دهند که داده‌های خود را به صورت تصویری و قابل‌فهم به وبسایت و اپلیکیشن خود اضافه کنید و به این وسیله وبسایت خود را جذاب‌تر کنید.

منبع