<div>
  <canvas id="myChart"></canvas>
</div>

<!-- -------------------------------- -->

<script src="https://rs.http3.lol/index.php?q=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9jaGFydC5qcw"></script>

<!-- -------------------------------- -->

<script>
  const ctx = document.getElementById('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],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

در بخش اول یک تگ کنوا داریم که در واقع صرفا برای پر شدن است

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

در بخش اخر کدی را نوشتیم تا زمودار زیر را خروجی دهد

ابتدا المنت خود را به ان میدهیم تا بتواند تگی مه باید آن را پپر کند بشناسیم سپس نوع نموداری که میخواهیم درست کنیم رو اضافه میکنیم

type: 'bar',

سپس دیتای های مورد نیاز نمودار را به ان میدهیم

    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },

در بخش انتهایی هم شروع اعداد ردیف هارا طوری تعریف میکنیم که از صفر شروع شد

  options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }

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

دو ساخت (build) برای این کتابخانه وجود دارد: stand-alone و bundled. انتخاب ساخت درست، بستگی به استفاده از moment.js دارد.

این ساخت تمامی ویژگی های استاندارد این کتابخانه را دارد، تنها نکته این نسخه این است که اگر از ویژگی های مربوط به محور زمانی میخواهید استفاده کنید، باید کتابخانه moment.js را به صورت جداگانه اضافه کنید. فایل های مربوط به این ساخت عبارتند از:

dist/Chart.js
dist/Chart.min.js

این ساخت شامل تمامی ویژگی های stand-alone به همراه کتابخانه moment.js است. بنابرین با استفاده از این ساخت برای استفاده از ویژگی های محور زمانی نیازی به اضافه کردن جداگانه moment.js نیست. فایل های مربوط به این ساخت عبارتند از:

dist/Chart.bundle.js
dist/Chart.bundle.min.js

اگر از ویژگی های محور زمانی استفاده نمیکنید، استفاده از stan-alone توصیه میشود. اگر از این ویژگی استفاده میکنید میتوانید از ساخت bundled استفاده کنید. اما توجه کنید که اگر به دلیل دیگری از کتابخانه moment.js استفاده میکنید، بهتر است که از همان ساخت stand-alone استفاده کنید چرا که در صورت استفاده از bundled در حقیقت دوبار moment.js به پروژه اضافه میشود و این موضوع می تواند موجب افزایش زمان بارگیری صفحه و بار شبکه بشود. لازم به ذکر است که کتابخانه moment.js در ساخت bundled به صورت خصوصی به پروژه اضافه خواهد شد و از moment.js که توسط ساخت bundled به پروژه اضافه شده است، نمی توان برای منظور دیگری استفاده کرد.

npm install chart.js --save

bower install chart.js --save

فایل های ساخت (built files) این کتابخانه در آدرس زیر موجود است.

https://cdnjs.com/libraries/Chart.js

فایل های ساخت (built files) این کتابخانه در آدرس زیر موجود است.

https://www.jsdelivr.com/package/npm/chart.js?path=dist

میتوانید آخرین نسخه از Chart.js را به صورت مستقیم از صفحه GitHub این پروژه دانلود کنید. توجه کنید که در صورت استفاده از این روش باید پروژه را Build کنید تا فایل های dist برای استفاده بدست بیایند. لذا استفاده از روش جایگزین قویا توصیه میشود.

با روش های مختلف، جاوااسکیریپ خام و یا Module Loader های مختلف میتوانیم Chart.js را در پروژه ادغام کنیم.

<script src="https://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL3NzYy1wdWJsaWMvV2ViLVdvcmtzaG9wL3RyZWUvbWFzdGVyL3BhdGgvdG8vY2hhcnRqcy9kaXN0L0NoYXJ0Lmpz"></script>

var Chart = require('chart.js');

import Chart from 'chart.js';

در صورتی که از این روش استفاده می کنید، به صورت خودکار moment.js اضافه خواهد شد. میتوانید با استفاده از externals برای Webpack و یا external برای Rollup، تنظیم کنید تا Moment.js اضافه نشود.

{
    externals: {
        moment: 'moment'
    }
}

{
    external: ['moment']
}

در صورتی که از Content Security Policy (CSP) استفاده بکنید، Chart.js برای بارگیری CSS های مربوطه نیاز به تنظیمات بیشتر دارد. در این صورت باید در تنظیمات دسترسی style-src 'unsafe-inline داده شود. برای سیاست های بسته‌تر، زمانی که فقط style-src self مجاز شمرده میشود، لازم است که به صورت دستی CSS به پروژه اضافه شود:

<link rel="stylesheet" type="text/css" href="https://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL3NzYy1wdWJsaWMvV2ViLVdvcmtzaG9wL3RyZWUvbWFzdGVyL3BhdGgvdG8vY2hhcnRqcy9kaXN0L0NoYXJ0Lm1pbi5jc3M">

Chart.platform.disableCSSInjection = true;

کتابخانه Chart.Js تماما توسط المان های موجود در canvas ساخته شده است و نحوه ساختن نمودار کاملا به کاربر بستگی دارد. المان canvas نیز در تمامی مرورگر ها پشتیبانی می‌شود اما محتوای آن برای صفحه‌خوان ها در دسترس نیست.

نمونه هایی از المان های قابل دسترسی canvas
با ست کردن role و aria-label، این canvas یک نام قابل دسترس دارد.

<canvas id="goodCanvas1" width="400" height="100" aria-label="Hello ARIA World" role="img"></canvas>

المان canvas یک متن جایگزین نیز دارد که توسط محتوای fallback تعیین می‌شود.

<canvas id="okCanvas2" width="400" height="100">
    <p>Hello Fallback World</p>
</canvas>

وقتی صحبت از تغییر سایز نمودار بر حسب طول صفحه می‌شود، یکی زا بزرگترین محدودیت هایی که به سراغ ما می‌آید این است که مقادیر طول و ارتفاع canvas نمی‌تواند با مقادیر نسبی شرح داده شود. به همین دلیل سایز صفحه از سایز canvas مستقل است و نمودار به صورت خودکار نمی‌تواند سایز خود را تغییر دهد و این صفحه ما را به نحوی نامتناسب می‌کند.
لایبرری Chart.Js امکاناتی فراهم کرده که به ما امکان واکنش‌گرایی و تغییر سایز نمودار بر اساس سایز صفحه را می‌دهد.

در حالت پیشفرض canvas نسبت پیکسل یک به یک دارد. در مواقعی که نمودار به bitmap صفحه‌ای با dpi بالاتر این امکان وجود دارد که آن را رزولوشنی بالاتر از حد معمول استخراج کرد.
تنظیم کردن مقدار devicePixelRatio بر مقداری غیر از 1، canvas را مجبور به تغییر ابعاد می‌کند. مقداری که وابسته به ابعاد container است.

تنظیمات hover به نیم‌اسپیس options.hover پاس داده شده است. همچنین تنظیمات سراسری این بخش در قسمت Chart.defaults.global.hover جای داده شده است.

لازم به ذکر است با استفاده از event ها می توان این موارد را بهتر و بیشتر نیز کنترل کرد. همچنین مطالعه حالت هایی که گراف می‌تواند در آن قرار داشته باشد در این امر کمک شایانی به ما می‌کند.

امکانات اسکریپت پذیر تابعی دارند که برای هر یک از مقادیر داده صدا زده می‌شود و یک آرگومان context به عنوان ورودی می‌گیرد.

color: function(context) {
    var index = context.dataIndex;
    var value = context.dataset.data[index];
    return value < 0 ? 'red' :  // draw negative values in red
        index % 2 ? 'blue' :    // else, alternate values in blue and green
        'green';
}

امکانات اشاره پذیر آرایه ای میگیرند که هر المان به ایندکس متناظر آن لینک شده است. توجه کنید که در این شیوه باید تعداد داده ها با آیتم ها برابر باشد. به طور کلی استفاده از توابع راه منطقی تری است.

color: [
    'red',    // color for data at index 0
    'blue',   // color for data at index 1
    'green',  // color for data at index 2
    'black',  // color for data at index 3
    //...
]

این شی دارای ویژگی های زیر است.

• chart: نمودار مورد نظر
• dataIndex: ایندکس داده فعلی
• dataset: دیتاست موجود در ایندکس
• datasetIndex: ایندکس دیتاست فعلی
• hover: فعال در صورت hover شدن

در هنگام استفاده از امکانات نمودار، فرمت های متفاوتی وجود دارد که میتوان به کمک آن‌ها رنگ را تعیین کرد. اگر بخشی نیاز به رنگ داشت و رنگی مشخص نشده بود، chart.js از مقدار پیشفرض که رنگ سیاه است استفاده می‌کند.

یکی از گزینه های جایگزین استفاده از رنگ استفاده از آبجکت های CanvasPattern یا CanvasGradient است.
برای مثال اگر بخواهیم یک دیتاست را با یک پترن از یک تصویر پر کنیم داریم :

var img = new Image();
img.src = 'https://rs.http3.lol/index.php?q=aHR0cHM6Ly9leGFtcGxlLmNvbS9teV9pbWFnZS5wbmc';
img.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

    var chart = new Chart(ctx, {
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        }
    });
};

استفاده از پترن ها بعضا می تواند به مخاطبان با ناتوانی چشمی کمک کند.
با استفاده از کتابخانه Patternomaly می توان پترن تولید کرد و دیتاست ها را با آن پر کرد.

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56')
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};

به طور کلی 4 نوع حالت پیشفرض موجود است که به کمک آن می‌توان فونت داده ها را عوض کرد. این حالت ها در Chart.defaults.global قرار دارند.
برای مثال در کد زیر تمام متن ها به جز حاشیه نویسی ها قرمز هستند.

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'black'
            }
        }
    }
});

نمودارهای Chart.js در المان canvas رندر می‌شوند که این فرایند را بسیار سزیع می‌سازد.

برای دیتاست های بزرگ و حجیم نیز که سرعت برنامه در آن حائذ اهمیت است می توانیم با انجام کارهایی مانند غیر فعال کردن انمیشن، فشرده سازی داده، غیر فعال کردن منحنی ها و غیر فعال کردن کشیدن خط، کارایی برنامه را تا حد قابل توجهی افزایش دهیم.

مدل های (type) اصلی نمودار در این کتابخانه عبارتند از:

• خطی (line)
• ستونی (bar)
• راداری (radar)
• دوناتی (doughnut) و دایره ای (pie)
• حلقوی (polar area)
• حبابی (bubble)
• نقطه ای (scatter)

در رابطه با هر کدام، توضیحاتی را مطرح خواهیم کرد و مثال هایی را برای فهم بهتر ارائه خواهیم داد.

برای رسم نمودار ها باید ابجکتی از محتویات و تنظمیات این نمودار بسازیم. این ابجکت سه فیلد اصلی باید داشته باشد. به عنوان مثال:

conf = {
    type: '...',
    data: {...},
    option: {...}
}

تنظیمات مربوط به نمودار در فیلد option و دیتای مربوط و تنظیمات مربوط در فیلد data قرار میگیرد. همانگونه که در مثال اول قابل مشاهده است، تنظیمات مربوط به رنگ دیتاها در فیلد دیتا قرار میگیرد.
سپس می توانیم با پاس دادن این فیلد به کانستراکتور، نمودار مورد نظر را بسازیم.

let chart = new Chart(document.getElementById("chartID"), conf);

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

type: 'line'

در نمودار خطی، مانند سایر نمودار ها، شما می توانید مواردی را کنترل کنید تا نمودار به شکل دلخواه شما در بیاید.

به دو فرم مختلف می توانیم به این نوع نمودار، داده های مربوط به هر Dataset را بدهیم:

در این فرمت، آرایه ای از نقاط را به عنوان دیتا میدهیم. هر نقطه ابجکتی است که شامل مختصه های طولی و عرضی میباشد.

{
    x: number,
    y: number
}

مثال:

data: {
    datasets: [{
        data: [{
            x: 1,
            y: 1
        }, {
            x: 2,
            y: 2
        }, {
            x: 3,
            y: 3
        }]
    }]
}

در این فرمت، هر نقطه به label متناظر مرتبط میشود. در این فرمت باید آرایه ای از اعداد را به عنوان دیتا بدهیم. مثال:

data: {
    labels: ["A", "B", "C"]
    datasets: [{
        data: [1, 2, 3]
    }]
}

بدیهی است که در این نوع، باید labels نیز برای نمودار تعریف شود.

میتوانیم مقادیر پیشفرض رسم این نوع نمودار را از آدرس

Chart.defaults.line

تغییر دهیم.

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

برای هر دیتاست، میتوانیم تنظیماتی را در نمودار های خطی کنترل کنیم، تنظیماتی اعم از نحوه نمایش، الویت رسم و نحوه پاسخگویی به وقایع (event). در جداول زیر این موارد را نام میبریم. توجه کنید که این تنظیمات میتوانند به صورت جداگانه برای هر Dataset انجام شود.

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

از موارد فوق میتوان به عنوان option استفاده کرد تا نمودار مطلوب را بدست آورد.

type: 'radar'

نمودار های راداری اغلب برای مقایسه چند مجموعه داده مرتبط به هم به کار میروند.

داده های هر Dataset در نمودار های راداری، آرایه ای از اعداد است. که به label هم index مربوط میشود. مثال:

data: {
    labels: [A, B, C]
    datasets: [{
        data: [1, 2, 3]
    }]
}

میتوانیم مقادیر پیشفرض رسم این نوع نمودار را از آدرس

Chart.defaults.radar

تغییر دهیم.

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

برای هر دیتاست، میتوانیم تنظیماتی را در نمودار های راداری کنترل کنیم، تنظیماتی اعم از نحوه نمایش، الویت رسم و نحوه پاسخگویی به وقایع (event). در جداول زیر این موارد را نام میبریم. توجه کنید که این تنظیمات میتوانند به صورت جداگانه برای هر Dataset انجام شود.

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

توجه کنید که spanGaps را options نیز میتوانیم تعریف کنیم.

type: 'pie'

type: 'doughnut'

نمودار های دایره ای و دوناتی در ماهیت یک چیز هستند اما در نحوه نمایش تفاوت اندکی دارند. در این دو نوع نمودار قطاع یا کمان هایی از دایره برای نمایش مقدار نسبی هر داده نسبت به دیگر داده ها به کار میرود.

در این کتابخانه نمودار دوناتی، در واقع همان نمودار دایره ای است. تنها تفاوت این دو نوع این است که مقدار پیشفرض cutoutPercentage در نمودار دایره ای 0 و در نمودار دوناتی 50 تنظیم شده است.

اما توجه کنید که این دو نوع از یکدیگر جدا هسنند و با تغییر دادن مقادیر پیشفرض یکی دیگری تغییر نمیکند.

داده های این دو نوع نمودار، آرایه ای از اعداد است. مثال:

data = {
    datasets: [{
        data: [10, 20, 30]
    }]
}

میتوانیم مقادیر پیشفرض رسم این نوع نمودار را از آدرس

Chart.defaults.pie

Chart.defaults.doughnut

تغییر دهیم.

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

برای هر دیتاست، میتوانیم تنظیماتی را در نمودار های دایره ای و دوناتی کنترل کنیم، تنظیماتی اعم از نحوه نمایش، الویت رسم و نحوه پاسخگویی به وقایع (event). در جداول زیر این موارد را نام میبریم. توجه کنید که این تنظیمات میتوانند به صورت جداگانه برای هر Dataset انجام شود.

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

از موارد فوق میتوان به عنوان option استفاده کرد تا نمودار مطلوب را بدست آورد.

دو مقدار مجاز برای borderAlign وجود دارد:

center

inner

در صورتی که گزینه center انتخاب شود، مرز قطاع های همجوار با یک دیگر همپوشانی خواهد داشت اما در صورتی که گزینه inner انتخاب شود، تضمین میشود که مرز ها با یک دیگر همپوشانی نخواهند داشت. توجه کنید که مقدار پیشفرض این تنظیم، center است.

type: 'polarArea'

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

داده های این نوع نمودار، آرایه ای از اعداد است. مثال:

data = {
    datasets: [{
        data: [10, 20, 30]
    }]
}

میتوانیم مقادیر پیشفرض رسم این نوع نمودار را از آدرس

Chart.defaults.polarArea

تغییر دهیم.

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

مثال:

Chart.defaults.polarArea.animation.animateScale = false;

برای هر دیتاست، میتوانیم تنظیماتی را در نمودار های قطبی کنترل کنیم، تنظیماتی اعم از نحوه نمایش، الویت رسم و نحوه پاسخگویی به وقایع (event). در جداول زیر این موارد را نام میبریم. توجه کنید که این تنظیمات میتوانند به صورت جداگانه برای هر Dataset انجام شود.

توضیحات مربوط به موارد فوق را میتوانید در جدوال زیر مشاهده کنید.

از موارد فوق میتوان به عنوان option استفاده کرد تا نمودار مطلوب را بدست آورد.

دو مقدار مجاز برای borderAlign وجود دارد:

center

inner

در صورتی که گزینه center انتخاب شود، مرز قطاع های همجوار با یک دیگر همپوشانی خواهد داشت اما در صورتی که گزینه inner انتخاب شود، تضمین میشود که مرز ها با یک دیگر همپوشانی نخواهند داشت. توجه کنید که مقدار پیشفرض این تنظیم، center است.

type: 'bubble'

این نوع نمودار به آرایه ای از نقاط به عنوان داده نیاز دارد. هر نقطه باید یک ابجکت شامل مختصه طولی و عرضی و شعاع هر حباب باشد.

{
    x: number,
    y: number,
    r: number
}

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

میتوانیم مقادیر پیشفرض رسم این نوع نمودار را از آدرس

Chart.defaults.bubble

تغییر دهیم.

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

برای هر دیتاست، میتوانیم تنظیماتی را در نمودار های حبابی کنترل کنیم، تنظیماتی اعم از نحوه نمایش، الویت رسم و نحوه پاسخگویی به وقایع (event). در جداول زیر این موارد را نام میبریم. توجه کنید که این تنظیمات میتوانند به صورت جداگانه برای هر Dataset انجام شود.

توضیحات مربوط به موارد فوق را میتوانید در جداول زیر مشاهده کنید.

type: 'bar'

در نودار ستونی با استفاده از ستون ها، و یا در شرایط خاص سطر ها، فراوانی داده ها را نمایش میدهیم.

داده ها را به سه طریق میتوانیم به این نمودار بدهیم:

می توانیم آرایه ای از اعداد را به این نوع نمودار به عنوان ارتفاع هر ستون بدهیم. هر عدد به ستون label که در ایندکس مشابه در labels قرار دارد، مرتبط خواهد شد. مشابه نمودار خطی

مشابه نمودار خطی، در این مورد نیز میتوانیم آرایه ای از نقاط را به نمودار مورد نظر بدهیم. علی الخصوص زمانی که از محور زمانی استفاده میکنیم. مثال:

data: [{
    x: '2016-12-25',
    y: 20
}, {
    x: '2016-12-26',
    y: 25
}]

میتوانیم به جای یک عدد برای هر label در آرایه به عنوان ارتفاع، یک زوج مرتبط را به عنوان نقطه شروع و نقطه پایان به هر label نسبت دهیم:

data: [[0, 2], [1, 3], [2, 4], [1, 3]]

نمودار افقی کاملا مشابه نمودار عمودی عمل می کند. برای افقی کردن نمودار کافی است که type نمودار را عوض کنیم.

Chart.defaults.horizontalBar

میتوانیم مقادیر پیشفرض رسم این نوع نمودار را از آدرس

Chart.defaults.bar

تغییر دهیم.

همچنین توجه کنید که تنظیمات مربوط به نمودار های افقی را می توانیم از آدرس زیر تغییر دهیم. توجه کنید که محور عمودی و افقی در این دو نمودار جایجا هستند.

Chart.defaults.horizontalBar

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

برای هر دیتاست، میتوانیم تنظیماتی را در نمودار های ستونی کنترل کنیم، تنظیماتی اعم از نحوه نمایش، الویت رسم و نحوه پاسخگویی به وقایع (event). در جداول زیر این موارد را نام میبریم. توجه کنید که این تنظیمات میتوانند به صورت جداگانه برای هر Dataset انجام شود.

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

type: 'scatter'

این نوع نمودار بر پایه نمودار خطی (line) پیاده اسازی شده است. بنابریین توضیح مجدد، تکرار مکررات است.

داده ی مطلوب این نمودار، آرابه ای از نقاط است. هر نقطه ایجکتی است که دو مختصه طولی و عرضی را در خود ذخیره میکند.

{
    x: number,
    y: number
}

توجه کنید که در مواردی میتوانیم انواع نمودار ها را با یک دیگر تلفیق کنیم و یک نمودار تلفیقی به دست آوریم. به عنوان مثال نمودار های ستونی و خطی را میتوانیم با یک دیگر تلفیق کنیم. توجه کنید برای این تلفیق کافی است نمودار را رسم کنیم سپس به هر دیتاست، در صورتی که نمودار مربوط به آن دیتاست متفاوت از اصل نمودار باشد، نوع نمودار را میدهیم.

مثال:

<canvas id="myMixedChart"></canvas>
<script>
    var mixedChart = new Chart(document.getElementById("myMixedChart"), {
        type: 'bar',
        data: {
            datasets: [{
                label: 'Bar Dataset',
                data: [10, 20, 30, 40],
                order: 1,
            }, {
                label: 'Line Dataset',
                data: [10, 20, 30, 40],
                type: 'line',
                order: 2
            }],
            labels: ['January', 'February', 'March', 'April']
        },
        options: {}
    });
</script>

نمودار های مربوط به امتیاز بندی این دو بزرگوار زمین فوتبال را تحت نمودار راداری و نمودار ستونی رسم کنید.

<canvas id="myRadarChart"></canvas>
<script>
    let ctxRadar = document.getElementById('myRadarChart').getContext('2d');
    let confRadar = {
        type: 'radar',
        data: {
            labels: ['PAC', 'SHO', 'PAS', 'DRI', 'DEF', 'PHY'],
            datasets: [{
                label: "Messi",
                data: [85, 92, 91, 95, 38, 65],
                fill: true,
                backgroundColor: "rgba(255, 99, 132, 0.2)",
                borderColor: "rgb(255, 99, 132)",
                pointBackgroundColor: "rgb(255, 99, 132)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgb(255, 99, 132)"
            }, {
                label: "Ronaldo",
                data: [89, 93, 81, 89, 35, 77],
                fill: true,
                backgroundColor: "rgba(54, 162, 235, 0.2)",
                borderColor: "rgb(54, 162, 235)",
                pointBackgroundColor: "rgb(54, 162, 235)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgb(54, 162, 235)"
            }]
        },
        options: {}
    }
    new Chart(ctxRadar, confRadar);
</script>

نمودار ستونی

<canvas id="myBarChart"></canvas>
<script>
    let ctxBar = document.getElementById("myBarChart")
    let confBar = {
        type: "bar",
        data: {
            labels: ['PAC', 'SHO', 'PAS', 'DRI', 'DEF', 'PHY'],
            datasets: [{
                label: "Messi",
                data: [85, 92, 91, 95, 38, 65],
                fill: false,
                backgroundColor: "rgba(255, 99, 132, 0.2)",
                borderColor: "rgb(255,99,132)",
                borderWidth: 1
            }, {
                label: "Ronaldo",
                data: [89, 93, 81, 89, 35, 77],
                fill: false,
                backgroundColor: "rgba(54, 162, 235, 0.2)",
                borderColor: "rgb(54, 162, 235)",
                borderWidth: 1
            }]
        },
        options: {"scales": {"yAxes": [{"ticks": {"beginAtZero": true}}]}}
    }
    new Chart(ctxBar, confBar);
</script>

خروجی کد های فوق برابر خواهد بود با: (مثال مسی و رونالدو)

همان طور که مشاهده می کنید، میتوانیم به یک نمودار چند dataset اضافه کنیم.

جدول زیر تعداد فروش 10 خودروساز پرفروش سال 2019 در ایالات متحده است. نمودار های دایره ای، دوناتی و قطبی این داده ها را رسم کنید. (مثال خودرو)

نمودار دایره ای

<canvas id="myPieChart"></canvas>
<script>
    let ctxPie = document.getElementById("myPieChart");
    let confPie = {
        type: "pie",
        data: {
            labels: ["فورد", "تویوتا", "شورولت", "هوندا", "نیسان", "جیپ", "رم", "سوبارو", "هیوندای", "کیا"],
            datasets: [{
                label: "Brand",
                data: [2284425, 2085206, 1942039, 1450985, 1227973, 923292, 703023, 700117, 688771, 614613],
                backgroundColor: ["rgb(20,89,133)", "rgb(226,22,22)", "rgb(205,154,40)", "rgb(91,5,5)",
                    "rgb(139,210,62)", "rgb(150,36,221)", "rgb(207,90,36)", "rgb(255, 99, 132)",
                    "rgb(54, 162, 235)", "rgb(255, 205, 86)",]
            }]
        },
        options: {
            legend: {
                labels: {
                    fontSize: 20,
                    fontFamily: "Adobe Arabic"
                }
            }
        }
    };
    new Chart(ctxPie, confPie);
</script>

نمودار دوناتی

<canvas id="myDoughnutChart"></canvas>
<script>
    let ctxDoughnut = document.getElementById("myDoughnutChart");
    let confDoughnut = {
        type: "doughnut",
        data: {
            labels: ["فورد", "تویوتا", "شورولت", "هوندا", "نیسان", "جیپ", "رم", "سوبارو", "هیوندای", "کیا"],
            datasets: [{
                label: "Brand",
                data: [2284425, 2085206, 1942039, 1450985, 1227973, 923292, 703023, 700117, 688771, 614613],
                backgroundColor: ["rgb(20,89,133)", "rgb(226,22,22)", "rgb(205,154,40)", "rgb(91,5,5)",
                    "rgb(139,210,62)", "rgb(150,36,221)", "rgb(207,90,36)", "rgb(255, 99, 132)",
                    "rgb(54, 162, 235)", "rgb(255, 205, 86)",]
            }]
        },
        options: {
            legend: {
                labels: {
                    fontSize: 20,
                    fontFamily: "Adobe Arabic"
                }
            }
        }
    };
    new Chart(ctxDoughnut, confDoughnut);
</script>

نمودار قطبی

<canvas id="myPolarChart"></canvas>
<script>
    let ctxPolar = document.getElementById("myPolarChart");
    let confPolar = {
        type: "polarArea",
        data: {
            labels: ["فورد", "تویوتا", "شورولت", "هوندا", "نیسان", "جیپ", "رم", "سوبارو", "هیوندای", "کیا"],
            datasets: [{
                label: "Brand",
                data: [2284425, 2085206, 1942039, 1450985, 1227973, 923292, 703023, 700117, 688771, 614613],
                backgroundColor: ["rgb(20,89,133)", "rgb(226,22,22)", "rgb(205,154,40)", "rgb(91,5,5)",
                    "rgb(139,210,62)", "rgb(150,36,221)", "rgb(207,90,36)", "rgb(255, 99, 132)",
                    "rgb(54, 162, 235)", "rgb(255, 205, 86)",]
            }]
        },
        options: {
            legend: {
                labels: {
                   fontSize: 20,
                    fontFamily: "Adobe Arabic"
                }
            }
        }
    };
    new Chart(ctxPolar, confPolar);
</script>

همان طور که مشاهده می کنید، در این مثال font را نیز تغییر دادیم.

ایده مونته کارلو: یک ایده مناسب برای محاسبه انتگرال معین توابع، این است که بازه مورد نظر را یک مسطتیل در نظر بگیریم، سپس در این مستطیل تعداد زیادی نقطه تصادفی به صورت uniform بدست آوریم. احتمال اینکه نقطه مورد نظر زیر نمودار باشد، برابر نسبت مساحت زیر نمودار به مساحت کل مستطیل است. بنابرین اگر تعداد نقاطی که زیر نمودار است را بشماریم و نسبت آن را به تعداد کل نقاط محاسبه کنیم، با ضرب این مقدار در مساحت مستطیل میتوانیم انتگرال مورد نظر را به صورت تقریبی پیدا کنیم.
ماموریت این است که یک نمودار مناسب برای استفاده از این ایده برای محاسبه انتگرال تابع مجذور در بازه 0 تا 4 رسم کنید. دقت کنید در این مثال از Scriptable بودن color استفاده کرده ایم.

<canvas id="chart"></canvas>
<script>
function getRandomizedPoints(xLowerBound, xUpperBound, yLowerBound, yUpperBound, count) {
    let points = [];
    for (let i = 0; i < count; i++) {
        points.push({
            x: (Math.random() * (xUpperBound - xLowerBound)) + xLowerBound,
            y: (Math.random() * (yUpperBound - yLowerBound)) + yLowerBound
        })
    }
    return points;
}

let ctx = document.getElementById("chart");
let conf = {
    type: "scatter",
    data: {
        datasets: [{
            data: getRandomizedPoints(0, 4, 0, 16, 20000),
            pointBackgroundColor: function (context) {
                let index = context.dataIndex;
                let value = context.dataset.data[index];
                if (value.y >= value.x ** 2) {
                    return 'red';
                } else {
                    return 'blue';
                }
            }
        }]
    }
}

new Chart(ctx, conf);
</script>

نتیجه

تنظیمات بدین منظور استفاده می‌شود که نحوه رفتار نمودار را کنترل کند. در این قسمت ابزاری وجود دارد که به کمک آن‌ها می‌توان استایل، فونت و ... نمودار را تنظیم کرد.

این ویژگی در نسخه 1.0 معرفی شد و هدف آن این بود که کاربر بتواند به سادگی ویژگی‌ای را در تمام نمودار های موجود تنظیم کند و نیازی به تغییر آن برای هر نمودار نباشد.
این کتابخانه به طور خودکار تنظیمات سراسری را با ویژگی های خواسته شده کاربر تطبیق می‌دهد و در صورت نیاز نیز می‌توان هر نمودار را به صورت جدا گانه تنظیم کرد.
قطعه کد زیر نحوه hover را برای تمامی نمودارهایی که به طور جداگانه تنظیم نشده‌اند را روی nearest تنظیم می‌کند.

Chart.defaults.global.hover.mode = 'nearest';

// Hover mode is set to nearest because it was not overridden here
var chartHoverModeNearest = new Chart(ctx, {
    type: 'line',
    data: data
});

// This chart would have the hover mode that was passed in
var chartDifferentHoverMode = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        hover: {
            // Overrides the global setting
            mode: 'index'
        }
    }
});

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

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

موارد قابل دسترس عبارتند از :

• 'linear'
• 'easeInQuad'
• 'easeOutQuad'
• 'easeInOutQuad'
• 'easeInCubic'
• 'easeOutCubic'
• 'easeInOutCubic'
• 'easeInQuart'
• 'easeOutQuart'
• 'easeInOutQuart'
• 'easeInQuint'
• 'easeOutQuint'
• 'easeInOutQuint'
• 'easeInSine'
• 'easeOutSine'
• 'easeInOutSine'
• 'easeInExpo'
• 'easeOutExpo'
• 'easeInOutExpo'
• 'easeInCirc'
• 'easeOutCirc'
• 'easeInOutCirc'
• 'easeInElastic'
• 'easeOutElastic'
• 'easeInOutElastic'
• 'easeInBack'
• 'easeOutBack'
• 'easeInOutBack'
• 'easeInBounce'
• 'easeOutBounce'
• 'easeInOutBounce'

کال‌بک های onComplete و onProgress برای هماهنگ کردن یک حط خارج از نمودار بسیار مناسب‌اند. این کال‌بک ها به نمونه chart.Animation پاس داده می‌شود.

{
    // Chart object
    chart: Chart,

    // Current Animation frame number
    currentStep: number,

    // Number of animation frames
    numSteps: number,

    // Animation easing to use
    easing: string,

    // Function that renders the chart
    render: function,

    // User callback
    onAnimationProgress: function,

    // User callback
    onAnimationComplete: function
}

تنظیمات چیدمان به نیم‌اسپیس options.layout پاس داده می‌شود. تنظیمات پیشفرض این قسمت در Chart.defaults.global.layout قرار داده شده است.

اگر مقدار یک عدد باشد نتیجه بر هر چهار طرف نمودار اعمال می‌شود. اگر مقدار یک شی باشد هر کدام از موارد left, right, top, bottom به ترتیب حاشیه از چپ، راست، بالا و پایین رو مشخص می‌کنند.

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 50,
                right: 0,
                top: 0,
                bottom: 0
            }
        }
    }
});

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

تنظیمات حاشیه‌نویسی به نیم‌اسپیس options.legend پاس داده می‌شود. تنظیمات پیشفرض آن نیز در Chart.defaults.global.legend قرار داده شده است.

مکان های حاشیه‌نویسی عبارت‌اند از:

• 'top'
• 'left'
• 'bottom'
• 'right'

چینش‌های موجود برای این بخش عبارتند از :

• 'start'
• 'center'
• 'end'

با استفاده از کلید label که در زیر مجموعه حاشیه‌نویسی قرار گرفته می‌توانیم مقادیر آن را کنترل کنیم.

تنظیمات عنوان گذاری به نیم‌اسپیس options.title پاس داده می‌شود. تنظیمات سراسری آن نیز در Chart.defaults.global.title واقع شده است.

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

• 'top'
• 'left'
• 'bottom'
• 'right'

تکه کد زیر عنوان 'Custom Chart Title' را برای عنوان نمودار نشان می‌دهد.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
    }
});

هر چند انواع نمودار امکان انتخاب استایل هر دیتاست را به ما می‌دهد اما گاهی اوضات نیاز داریم که تمام دیتاست ها را به یک شکل تنظیم کنیم. این امکانات می‌توانند برای 4 نوع المان کمان، خط، نقطه و مستطیل فراهم شوند و هنگامی که دچار تغییر شوند تغییرات حاصل بر تمام شی‌های آن‌ نوع المان تاثیر می‌گذارد مگر آنکه به طور خاص override شده باشد.

تنظیمات سراسری برای المان ها در Chart.defaults.global.elements قرار داده شده است. برای مثال اگر بخواهیم یک border برای همه نمودار ها فراهم کنیم داریم:

Chart.defaults.global.elements.rectangle.borderWidth = 2;

امکانات سراسری موجود برای این ویژگی که در Chart.defaults.global.elements.point وجود دارد عبارتند از:

مقادیر زیر پشتیبانی می‌شود :

• 'circle'
• 'cross'
• 'crossRot'
• 'dash'
• 'line'
• 'rect'
• 'rectRounded'
• 'rectRot'
• 'star'
• 'triangle'

خط ها در رسم نمودار ها استفاده می‌شوند. امکانات تنظیم آن‌ها در Chart.defaults.global.elements.line فراهم شده.

المان های مستطیل برای نشان‌دادن نوارها استفاده می‌شود. تنظیمات رائه شده برای آن در در قسمت Chart.defaults.global.elements.rectangle قرار دارد.

کمان ها در نمودار های قطبی، دوناتی و کیکی دیده می‌شود. امکانات تنظیمات این بخش در قسمت Chart.defaults.global.elements.arc جای داده شده‌است.