Web-Workshop/ChartJS at master · ssc-public/Web-Workshop

Name	Name	Last commit message	Last commit date
parent directory ..
examples	examples
README.md	README.md

برنامه سازی وب، دانشگاه صنعتی شریف
ارائه دهنده درس: جناب آقای امید جعفری نژاد
نویسندگان: آرین احدی نیا، محمد جعفری

مقدمه

Chart.js یک کتابخانه متن باز برای بصری سازی و نمایش داده ها در صفحات HTML به کمک JavaScript است. در این مقاله Chart.js را معرفی میکنیم و استفاده دقیق و اصولی از آن را کمک مثال های متنوع با اتکا بر مستندات Chart.js بیان می کنیم. ابتدا برای بدست آوردن کلیت یک مثال ساده را مطرح کنیم. سپس در ادامه به سمت اصول و منطق این کتابخانه میرویم.

تصاویر

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

یک مثال ساده

برای شروع کار با این کتابخانه 3 بخش داریم بخش اول 1- HTML 2- CDN or install 3- JS code که در پایین قرار دارد

البته در این کد CDN استفاده شده

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

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

<script src="https://cdn.jsdelivr.net/npm/chart.js"></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 دارد.

stand-alone:

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

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

bundled:

این ساخت شامل تمامی ویژگی های 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

npm install chart.js --save

رویکرد دوم: Bower

bower install chart.js --save

رویکرد سوم: CDNJS

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

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

رویکرد چهارم: jsDeliver

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

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

رویکرد پنجم: دانلود مستقیم GitHub

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

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

رویکرد اول: Script Tag

<script src="path/to/chartjs/dist/Chart.js"></script>

رویکرد دوم: Common JS

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

رویکرد سوم: Bundler (مانند Webpack یا Rollup یا ...)

import Chart from 'chart.js';

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

Webpack:

{
    externals: {
        moment: 'moment'
    }
}

Rollup:

{
    external: ['moment']
}

سیاست امنیت محتوا

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

<link rel="stylesheet" type="text/css" href="path/to/chartjs/dist/Chart.min.css">

اگر از این روش استفاده می کنید باید قبل از رسم اولین نمودار style injection را خاموش کنید:

Chart.platform.disableCSSInjection = true;

ویژگی های کلی

دسترسی (Accessibility)

کتابخانه 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>

واکنش گرا (Responsive)

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

امکانات واکنش‌گرایی

نام	نوع	حالت پیشفرض	توضیحات
responsive	boolean	TRUE	بوم نمودار را وقتی که container آن تغییر اندازه دهد، ریسایز میکند.
responsiveAnimationDuration	number	0	مدت زمانی که انیمیشن تغییر سایز طول می کشد.
maintainAspectRatio	boolean	TRUE	در صورت فعال بودن نسبت ارتفاع و طول را با تغییر اندازه حفظ می کند.
aspectRatio	number	2	نسبت طول تصویر بر ارتفاع
onResize	function	null	در هنگام تغییر سایز فراخوانده می شود

نسبت پیکسل (Pixel Ratio)

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

امکانات نسبت پیکسل

نام	نوع	حالت پیشفرض	توضیحات
devicePixelRatio	number	window.devicePixelRatio	رونویسی مقدار پیشفرض نسبت پیکسلی

تعامل (Interaction)

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

نام	نوع	حالت پیشفرض	توضیحات
mode	string	'nearest'	تعیین میکند کدام المان ها در tooltip قرار داده میتوضیحاتشوند.
intersect	boolean	TRUE	در صورت فعال بودن افکت hover تنها در صورتی عمل می کند که المان با چارت اشتراکتداخل داشته باشد.
axis	string	'x'	می تواند به مقادیر 'x', 'y' یا 'xy' ست شود تا تعیین کند کدام جهت در محاسبه فاصله ها استفاده شده است.
animationDuration	number	400	مدت زمانی که انیمیشن hover طول میکشد به میلی ثانیه.

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

امکانات (Options)

امکانات اسکریپت پذیر (Scriptable Options)

امکانات اسکریپت پذیر تابعی دارند که برای هر یک از مقادیر داده صدا زده می‌شود و یک آرگومان 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';
}

امکانات اشاره پذیر (Indexable Options)

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

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
    //...
]

مفاد امکانات (Options Context)

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

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

رنگ ها (Colors)

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

پترن ها و گرادیان ها (Patterns & Gradients)

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

var img = new Image();
img.src = 'https://example.com/my_image.png';
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'
            }
        }
    }
});

نام	نوع	حالت پیشفرض	توضیحات
defaultFontColor	Color	'#666'	رنگ پیشفرض تمام متن ها
defaultFontFamily	string	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	فونت پیشفرض تمام متن ها
defaultFontSize	number	12	سایز پیشفرض فونت ها
defaultFontStyle	string	'normal'	استایل پیشفرض فونت ها

کارایی (Performance)

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

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

انواع نمودار در Chart.js

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

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

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

کلیت رسم نمودار

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

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

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

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

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

خطی (line)

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

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

تغییر دهیم.

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

تنظیمات مربوط به Dataset ها

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

نام فیلد	نوع	اسکیریپ پذیر	ایندکس پذیر	مقدار پیشفرض
backgroundColor	Color	بله	خیر	rgba(0, 0, 0, 0.1)
borderCapStyle	string	بله	خیر	butt
borderColor	Color	بله	خیر	rgba(0, 0, 0, 0.1)
borderDash	number[]	بله	خیر	[]
borderDashOffset	number	بله	خیر	0
borderJoinStyle	string	بله	خیر	miter
borderWidth	number	بله	خیر	3
cubicInterpolationMode	string	بله	خیر	default
clip	number	object	خیر	خیر
fill	boolean	string	بله	خیر
hoverBackgroundColor	Color	بله	خیر	undefined
hoverBorderCapStyle	string	بله	خیر	undefined
hoverBorderColor	Color	بله	خیر	undefined
hoverBorderDash	number[]	بله	خیر	undefined
hoverBorderDashOffset	number	بله	خیر	undefined
hoverBorderJoinStyle	string	بله	خیر	undefined
hoverBorderWidth	number	بله	خیر	undefined
label	string	خیر	خیر	''
lineTension	number	خیر	خیر	0.4
order	number	خیر	خیر	0
pointBackgroundColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
pointBorderColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
pointBorderWidth	number	بله	بله	1
pointHitRadius	number	بله	بله	1
pointHoverBackgroundColor	Color	بله	بله	undefined
pointHoverBorderColor	Color	بله	بله	undefined
pointHoverBorderWidth	number	بله	بله	1
pointHoverRadius	number	بله	بله	4
pointRadius	number	بله	بله	3
pointRotation	number	بله	بله	0
pointStyle	string	Image	بله	بله
showLine	boolean	خیر	خیر	undefined
spanGaps	boolean	خیر	خیر	undefined
steppedLine	boolean	string	خیر	خیر
xAxisID	string	خیر	خیر	first x axis
yAxisID	string	خیر	خیر	first y axis

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

عمومی

نام فیلد	توضیحات
label	برچسب (label) دیتاست که در legend و tooltip نمایش داده میشود.
order	الویت رسم دیتاست. توجه کنید که این الویت بر legend و tooltip نیز تاثیر میگذارد.
xAxisID	شناسه محور X این این دیتاست بر روی آن نمودار میشود (برای نمودار های چند محوره)
yAxisID	شناسه محور Y این این دیتاست بر روی آن نمودار میشود (برای نمودار های چند محوره)

ظاهر نقاط

نام فیلد	توضیحات
pointBackgroundColor	رنگ پرکننده نقاط.
pointBorderColor	رنگ مرز نقاط.
pointBorderWidth	ضحامت مرز نقاط بر مبنای px.
pointHitRadius	سایر پیکسلی نقاط نمایش داده نشده برای واکنش نشان دادن به حرکات نشانگر.
pointRadius	شعاع نقاط. اگر صفر باشد نقطه نمایش داده نخواهد شد.
pointRotation	میزان دوران نقاط
pointStyle	شکل نقاط

پاسخ به وقایع

نام فیلد	توضیحات
pointHoverBackgroundColor	رنگ پرکننده نقاط زمانی که نشانگر بر روی آن است.
pointHoverBorderColor	رنگ مرز نقاط زمانی که نشانگر بر روی آن است.
pointHoverBorderWidth	ضخامت مرز نقاط زمانی که نشانگر بر روی آن است.
pointHoverRadius	شعاع نقاط زمانی که نشانگر بر روی آن است.

ظاهر خطوط

نام فیلد	توضیحات
backgroundColor	رنگ پر کننده خط
borderCapStyle	ظاهر انتهای خط
borderColor	رنگ خط
borderDash	طول و فاصله گذاری خط تیره ها (در صورت نیاز)
borderDashOffset	offset خط تیره ها
borderJoinStyle	ظاهر LineJoin
borderWidth	عرض خط بر مبنای پیکسل
fill	پر کردن زیر خط
showLine	تنظیم می کند که آیا خط برای این دیتاست رسم شود یا نشود.
spanGaps	در صورت True بودن، موجب فاصله انداختن NaN و Null در خط میشود، در صورتی که False باشد، خط پیوستگی خود را حفظ خواهد کرد.

تنظیمات پیکربندی

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

نام	نوع	مقدار پیشفرض	توضیحات
showLines	boolean	TRUE	آیا خط واصل نقاط رسم شود یا نه.
spanGaps	boolean	FALSE	آیا NaN در خط واصل نقاط شکستگی ایجاد کند یا نکند.

راداری (radar)

type: 'radar'

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

داده ها

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

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

مقادیر پیشفرض

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

Chart.defaults.radar

تغییر دهیم.

تنظیمات مربوط به Dataset ها

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

نام فیلد	نوع	اسکیریپ پذیر	ایندکس پذیر	مقدار پیشفرض
backgroundColor	Color	بله	خیر	rgba(0, 0, 0, 0.1)
borderCapStyle	string	بله	خیر	butt
borderColor	Color	بله	خیر	rgba(0, 0, 0, 0.1)
borderDash	number[]	بله	خیر	[]
borderDashOffset	number	بله	خیر	0
borderJoinStyle	string	بله	خیر	miter
borderWidth	number	بله	خیر	3
hoverBackgroundColor	Color	بله	خیر	undefined
hoverBorderCapStyle	string	بله	خیر	undefined
hoverBorderColor	Color	بله	خیر	undefined
hoverBorderDash	number[]	بله	خیر	undefined
hoverBorderDashOffset	number	بله	خیر	undefined
hoverBorderJoinStyle	string	بله	خیر	undefined
hoverBorderWidth	number	بله	خیر	undefined
fill	boolean	string	بله	خیر
label	string	خیر	خیر	empty string
order	number	خیر	خیر	0
lineTension	number	خیر	خیر	0
pointBackgroundColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
pointBorderColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
pointBorderWidth	number	بله	بله	1
pointHitRadius	number	بله	بله	1
pointHoverBackgroundColor	Color	بله	بله	undefined
pointHoverBorderColor	Color	بله	بله	undefined
pointHoverBorderWidth	number	بله	بله	1
pointHoverRadius	number	بله	بله	4
pointRadius	number	بله	بله	3
pointRotation	number	بله	بله	0
pointStyle	string	Image	بله	بله
spanGaps	boolean	خیر	خیر	undefined

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

عمومی

نام فیلد	توضیحات
label	نام دیتاست که در legend و tooltip ظاهر میشود.
order	الویت رسم.

ظاهر نقاط

نام فیلد	توضیحات
pointBackgroundColor	رنگ پرکننده نقاط
pointBorderColor	رنگ مرزی نقاط
pointBorderWidth	ضخامت مرز نقاط
pointHitRadius	اندازه پیکسلی نقاط نمایش داده نشده برای واکنش به ماوس
pointRadius	شعاع نقاط، اگر صفر باشد نقطه نمایش داده نمیشود
pointRotation	دوران نقاط
pointStyle	شکل نقاط

ظاهر خطوط

Name	Description
backgroundColor	رنگ پرکننده خطوط
borderCapStyle	شکل انتهایی خطوط
borderColor	رنگ خطوط
borderDash	طول و فاصله خط تیره ها (در صورت نیاز)
borderWidth	ضخامت خطوط بر مبنای پیکسل
fill	پر کردن زیر خط
spanGaps	اگر false باشد، دیتای NaN یا Null موجب شکستگی در خط میشود، در غیر این صورت، خط پیوستگی خود را حفظ میکند.

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

پاسخ به وقایع

نام فیلد	توضیحات
pointHoverBackgroundColor	رنگ زمینه نقاط وقتی نشانگر بر روی آن است.
pointHoverBorderColor	رنگ مرز نقاط وقتی نشانگر بر روی آن است.
pointHoverBorderWidth	ضخامت مرز نقاط وقتی نشانگر بر روی آن است.
pointHoverRadius	شعاع نقاط وقتی نشانگر بر روی آن است.

دوناتی (doughnut) و دایره ای (pie)

type: 'pie'

type: 'doughnut'

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

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

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

داده ها

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

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

مقادیر پیشفرض

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

Chart.defaults.pie

Chart.defaults.doughnut

تغییر دهیم.

تنظیمات مربوط به Dataset ها

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

نام فیلد	نوع	اسکیریپ پذیر	ایندکس پذیر	مقدار پیشفرض
backgroundColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
borderAlign	string	بله	بله	center
borderColor	Color	بله	بله	#fff
borderWidth	number	بله	بله	2
data	number[]	خیر	خیر	required
hoverBackgroundColor	Color	بله	بله	undefined
hoverBorderColor	Color	بله	بله	undefined
hoverBorderWidth	number	بله	بله	undefined
weight	number	خیر	خیر	1

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

ظاهری

نام فیلد	توضیحات
backgroundColor	رنگ زمینه قطاع.
borderColor	زنگ مرز قطاع
borderWidth	ضخامت مرز قطاع بر مبنای px.
weight	ضخامت نسبی دیتاست که مقدار دهی به آن باعث میشود دیتاست ها با یک ضخامت نسبی نسبت به هم چاپ شوند.

پاسخ به وقایع

نام فیلد	توضیحات
hoverBackgroundColor	رنگ زمینه قطاع هنگامی که نشانگر بر روی آن است.
hoverBorderColor	رنگ مرز قطاع هنگامی که نشانگر بر روی آن است
hoverBorderWidth	ضخامت مرز قطاع هنگامی که نشانگر بر روی آن است بر مبنای px.

تنظیمات پیکربندی

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

نام فیلد	نوع	مقدار پیشفرض	توضیحات
cutoutPercentage	number	دایره ای: 0، دوناتی: 50	درصد مساحت خالی میانی
rotation	number	-0.5 * Math.PI	زاویه شروع رسم اولین قطاع
circumference	number	2 * Math.PI	زاویه کل قطاع ها، 2Pi برابر دایره کامل است.
animation.animateRotate	boolean	TRUE	در صورت درست بودن نمودار با انیمیشن دورانی نمایش داده میشود.
animation.animateScale	boolean	FALSE	در صورت درست بودن، نمودار با انیمیشین از مرکز بزرگ میشود.

Border Alignment

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

center

inner

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

قطبی (polar area)

type: 'polarArea'

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

داده ها

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

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

مقادیر پیشفرض

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

Chart.defaults.polarArea

تغییر دهیم.

مثال:

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

تنظیمات مربوط به Dataset ها

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

نام فیلد	نوع	اسکیریپ پذیر	ایندکس پذیر	مقدار پیشفرض
backgroundColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
borderAlign	string	بله	بله	center
borderColor	Color	بله	بله	'#fff'
borderWidth	number	بله	بله	2
data	number[]	خیر	خیر	required
hoverBackgroundColor	Color	بله	بله	undefined
hoverBorderColor	Color	بله	بله	undefined
hoverBorderWidth	number	بله	بله	undefined

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

ظاهری

نام فیلد	توضیحات
backgroundColor	رنگ زمینه قطاع.
borderColor	رنگ مرز قطاع.
borderWidth	ضخامت مرز قطاع بر مبنای px.

پاسخ به وقایع

نام فیلد	توضیحات
hoverBackgroundColor	رنگ زمینه قطاع هنگامی که نشانگر بر روی آن است.
hoverBorderColor	رنگ مرز قطاع هنگامی که نشانگر بر روی آن است
hoverBorderWidth	ضخامت مرز قطاع هنگامی که نشانگر بر روی آن است بر مبنای px.

تنظیمات پیکربندی

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

نام	نوع	مقدار پیشفرض	توضیحات
startAngle	number	-0.5 * Math.PI	زاویه شروع رسم اولین قطاع
animation.animateRotate	boolean	TRUE	در صورت درست بودن نمودار با انیمیشن دورانی نمایش داده میشود.
animation.animateScale	boolean	TRUE	در صورت درست بودن، نمودار با انیمیشین از مرکز بزرگ میشود.

Border Alignment

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

center

inner

حبابی (bubble)

type: 'bubble'

داده ها

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

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

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

مقادیر پیشفرض

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

Chart.defaults.bubble

تغییر دهیم.

تنظیمات مربوط به Dataset ها

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

نام فیلد	نوع فیلد	اسکیریپ پذیر	ایندکس پذیر	مقدار پیشفرض
backgroundColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
borderColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
borderWidth	number	بله	بله	3
data	object[]	خیر	خیر	required
hoverBackgroundColor	Color	بله	بله	undefined
hoverBorderColor	Color	بله	بله	undefined
hoverBorderWidth	number	بله	بله	1
hoverRadius	number	بله	بله	4
hitRadius	number	بله	بله	1
label	string	خیر	خیر	undefined
order	number	خیر	خیر	0
pointStyle	string	بله	بله	circle
rotation	number	بله	بله	0
radius	number	بله	بله	3

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

عمومی

نام فیلد	توضیحات
label	برچسب (label) دیتاست که در legend و tooltip نمایش داده میشود.
order	الویت رسم دیتاست.

ظاهری

نام فیلد	توضیحات
backgroundColor	رنگ زمینه حباب ها.
borderColor	رنگ مرز حباب ها.
borderWidth	ضخامت مرز حباب ها بر مبنای px.
pointStyle	شکل حباب ها.
rotation	دوران حباب ها (بر مینای درجه).
radius	شعاع حباب ها.

پاسخ به وقایع

نام فیلد	توضیحات
hoverBackgroundColor	رنگ زمینه حباب ها هنگامی که نشانگر بر روی آن است.
hoverBorderColor	رنگ مرز حباب ها هنگامی که نشانگر بر روی آن است.
hoverBorderWidth	ضخامت مرز حباب ها هنگامی که نشانگر بر روی آن است.
hoverRadius	شعاع مازاد حباب ها حباب ها هنگامی که نشانگر بر روی آن است.
hitRadius	شعاع اضافی حباب ها هنگامی که بر آن ضربه زده میشود.

ستونی (bar)

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

تنظیمات مربوط به Dataset ها

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

نام فیلد	نوع	اسکیریپ پذیر	ایندکس پذیر	مقدار پیشفرض
backgroundColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
borderColor	Color	بله	بله	rgba(0, 0, 0, 0.1)
borderSkipped	string	بله	بله	bottom
borderWidth	number	object	بله	بله
data	object[]	خیر	خیر	required
hoverBackgroundColor	Color	خیر	بله	undefined
hoverBorderColor	Color	خیر	بله	undefined
hoverBorderWidth	number	خیر	بله	1
label	string	خیر	خیر	empty_string
order	number	خیر	خیر	0
xAxisID	string	خیر	خیر	first x axis
yAxisID	string	خیر	خیر	first y axis

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

عمومی

نام فیلد	توضیحات
label	نام دیتاست که در legend و tooltip نمایش داده میشود.
order	الویت رسم.
xAxisID	شناسه محور افقی
yAxisID	شناسه محور عمودی

ظاهری

نام فیلد	توضیحات
backgroundColor	رنگ زمینه ستون ها
borderColor	رنگ مرز ستون ها
borderWidth	ضخامت ستون ها بر مبنای پیکسل

پاسخ به وقایع

نام فیلد	توضیحات
hoverBackgroundColor	رنگ زمینه ستون ها زمانی که نشانگر بر روی آن است.
hoverBorderColor	رنگ مرز ستون ها زمانی که نشانگر بر روی آن است.
hoverBorderWidth	ضخامت ستون ها بر مبنای پیکسل زمانی که نشانگر بر روی آن است.

نقطه ای (scatter)

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 در ایالات متحده است. نمودار های دایره ای، دوناتی و قطبی این داده ها را رسم کنید. (مثال خودرو)

نام شرکت	میزان فروش
فورد	2284425
تویوتا	2085206
شورولت	1942039
هوندا	1450985
نیسان	1227973
جیپ	923292
رم	703023
سوبارو	700117
هیوندای	688771
کیا	614613

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

<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 به طور پیشفرق نمودار ها را انیمیت می‌کند. تعدادی ابزار در این کتابخانه فراهم شده تا ظاهر، طول و نحوه نمایش این نمودار ها قایل شخصی سازی باشد.

تنظیمات انیمیشن

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

نام	نوع	پیشفرض	توضیحات
duration	number	1000	The number of milliseconds an animation takes.
easing	string	'easeOutQuart'	Easing function to use. more...
onProgress	function	null	Callback called on each step of an animation. more...
onComplete	function	null	Callback called at the end of an animation. more...

محو شدن

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

'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 قرار داده شده است.

نام	نوع	حالت پیشفرض	توضیحات
padding	number/object	0	فاصله درونی از container

حاشیه درونی (Padding)

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

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

حاشیه نویسی (legend)

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

امکانات حاشیه نویسی

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

نام	نوع	حالت پیشفرض	توضیحات
display	boolean	TRUE	آیا حاشیه‌نویسی قابل رویت است؟
position	string	'top'	موقعیت حاشیه‌نویسی
align	string	'center'	جینش حاشیه‌نویسی
fullWidth	boolean	TRUE	تمام‌صفحه شدن نمودار
onClick	function		کال‌بکی که در هنگام کلیک بر روی لیبل فراخوانده می‌شود
onHover	function		کال‌بکی که در هنگام عبور از روی لیبل فراخوانده می‌شود
onLeave	function		کال‌بکی که در هنگام خروج موس از روی لیبل فراخوانده می‌شود
reverse	boolean	FALSE	حاشیه نویسی در ترتیب معکوس نمایش داده می‌شود.
labels	object		در قسمت های زیرین کامل توضیح داده شده است.
rtl	boolean		در صورت فعال بودن راست‌چین می‌شود.
textDirection	string	canvas' default	جهت نوشتار را به اجبار راست‌چین می‌کند.

موقعیت (Position)

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

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

چینش (Align)

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

'start'
'center'
'end'

تنظیمات برچسب حاشیه‌نویسی

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

نام	نوع	حالت پیشفرض	توضیحات
boxWidth	number	40	عرض جعبه
fontSize	number	12	سایز فونت
fontStyle	string	'normal'	استایل فونت
fontColor	Color	'#666'	رنگ فونت
fontFamily	string	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	نام فونت
padding	number	10	حاشیه‌درونی جعبه
generateLabels	function		برای هر حاشیه‌نویسی یک برچسب تشکیل می‌دهد.
filter	function	null	حاشیه نویسی ها را فیلتر می‌کند.

عنوان گذاری

تنظیمات عنوان گذاری

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

نام	نوع	حالت پیشفرض	توضیحات
display	boolean	FALSE	آیا عنوان نمیان است؟
position	string	'top'	موقعیت عنوان
fontSize	number	12	سایز فونت عنوان
fontFamily	string	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	نام فونت عنوان
fontColor	Color	'#666'	رنگ فونت
fontStyle	string	'bold'	استایل فونت
padding	number	10	حاشیه درونی
lineHeight	number/string	1.2	ارتفاع یک خط
text	string/string[]	''	متنی که نمایش داده میشود.

موقعیت (Position)

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

'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 وجود دارد عبارتند از:

نام	نوع	حالت پیشفرض	توضیحات
radius	number	3	شعاع نقطه
pointStyle	string	Image	'circle'
rotation	number	0	چرخش نقطه
backgroundColor	Color	'rgba(0, 0, 0, 0.1)'	رنگ درونی نقطه
borderWidth	number	1	ضخامت خط دور نقطه
borderColor	Color	'rgba(0, 0, 0, 0.1)'	رنگ خط دور نقطه
hitRadius	number	1	شعاع نقطه پس از فشرده شدن
hoverRadius	number	4	شعاع نقطه هنگام عبور از آن
hoverBorderWidth	number	1	ضخامت خط دور نقطه هنگام عبور از آن

استایل های نقاط

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

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

تنظیمات خط‌ها

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

نام	نوع	حالت پیشفرض	توضیحات
tension	number	0.4	منحنی بزیور
backgroundColor	Color	'rgba(0, 0, 0, 0.1)'	رنگ داخلی خط
borderWidth	number	3	ضخامت خط حاشیه‌ای خط
borderColor	Color	'rgba(0, 0, 0, 0.1)'	رنگ خط حاشیه‌ای خط
borderCapStyle	string	'butt'	استایل cap خط
borderDash	number[]	[]	حاشیه خط‌چین
borderDashOffset	number	0	میزان Offset خط
borderJoinStyle	string	'miter'	نحوه پیوستن خط‌ها
fill	boolean	string	TRUE
stepped	boolean	FALSE	در صورت فعال بودن خط به سورت پله‌ای کشیده می‌شود.
fill	boolean	string	TRUE
stepped	boolean	FALSE	در صورت فعال بودن خط به سورت پله‌ای کشیده می‌شود.

تنظیمات مستطیل‌ها

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

نام	نوع	حالت پیشفرض	توضیحات
backgroundColor	Color	'rgba(0, 0, 0, 0.1)'	رنگ درونی نوار
borderWidth	number	0	ضخامت خط بیرونی نوار
borderColor	Color	'rgba(0, 0, 0, 0.1)'	رنگ خط بیرونی نوار
borderSkipped	string	'bottom'	در صورت انتخاب هر طرف خط دوری آن قسمت skip میشود.

تنظیمات کمان‌ها

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

نام	نوع	حالت پیشفرض	توضیحات
angle - for polar only	number	circumference / (arc count)	زاویه تحت پویشش
backgroundColor	Color	'rgba(0, 0, 0, 0.1)'	رنگ درونی کمان
borderAlign	string	'center'	چینش خط بیرونی کمان
borderColor	Color	'#fff'	رنگ خط بیرونی کمان
borderWidth	number	2	ضخامت خط بیرونی کمان

در عمل

یرای اطلاعات بیشتر پروژه ای جنگو در این بخش قرار میدهم که با دریافت اطلاعات از API بازار بورس نمودار های مورد نیاز برای تحلیل سهام به ما میدهد لینک پروژه

Files

ChartJS

Directory actions

More options

Directory actions

More options

Latest commit

History

ChartJS

Folders and files

parent directory

README.md

مقدمه

تصاویر

یک مثال ساده

نصب و ادغام

ساخت های کتابخانه

stand-alone:

bundled:

انتخاب ساخت مناسب

رویکرد اول: npm

رویکرد دوم: Bower

رویکرد سوم: CDNJS

رویکرد چهارم: jsDeliver

رویکرد پنجم: دانلود مستقیم GitHub

رویکرد اول: Script Tag

رویکرد دوم: Common JS

رویکرد سوم: Bundler (مانند Webpack یا Rollup یا ...)

سیاست امنیت محتوا

ویژگی های کلی

دسترسی (Accessibility)

مثال

واکنش گرا (Responsive)

امکانات واکنش‌گرایی

نسبت پیکسل (Pixel Ratio)

امکانات نسبت پیکسل

تعامل (Interaction)

امکانات (Options)

امکانات اسکریپت پذیر (Scriptable Options)

امکانات اشاره پذیر (Indexable Options)

مفاد امکانات (Options Context)

رنگ ها (Colors)

پترن ها و گرادیان ها (Patterns & Gradients)

فونت ها

کارایی (Performance)

انواع نمودار در Chart.js

کلیت رسم نمودار

خطی (line)

داده ها

آرایه ای از نقاط

آرایه ای از اعداد

مقادیر پیشفرض

تنظیمات مربوط به Dataset ها

عمومی

ظاهر نقاط

پاسخ به وقایع

ظاهر خطوط

تنظیمات پیکربندی

راداری (radar)

داده ها

مقادیر پیشفرض

تنظیمات مربوط به Dataset ها

عمومی

ظاهر نقاط

ظاهر خطوط

پاسخ به وقایع

دوناتی (doughnut) و دایره ای (pie)

داده ها

مقادیر پیشفرض

تنظیمات مربوط به Dataset ها

ظاهری

پاسخ به وقایع

تنظیمات پیکربندی

Border Alignment

قطبی (polar area)

داده ها

مقادیر پیشفرض

تنظیمات مربوط به Dataset ها

ظاهری

پاسخ به وقایع