از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای ایجاد نمودارها در جاوا اسکریپت با Chart.jsData به ما کمک می کند داستان های قانع کننده ای را بیان کنیم، تجسم داده ها نمایش گرافیکی اطلاعات و داده ها با استفاده از عناصر گرافیکی مانند نمودارها، نمودارها و غیره است. روی. چند کتابخانه وجود دارد که می تواند به ما کمک کند تا با کار نسبتاً کمی نتایج زیبایی داشته باشیم و Chart.js یکی از …
سرفصلهای مطلب
معرفی
داده ها به ما کمک می کنند داستان های قانع کننده ای را بیان کنیم، تجسم داده ها نمایش گرافیکی اطلاعات و داده ها با استفاده از عناصر گرافیکی مانند نمودارها، نمودارها و غیره است. روی. چند کتابخانه وجود دارد که می‌تواند به ما کمک کند تا با کار نسبتاً کمی نتایج زیبایی داشته باشیم و Chart.js یکی از آنهاست.
در این راهنما، روش ساخت نمودارها در جاوا اسکریپت با استفاده از Chart.js، و همچنین سفارشی سازی و سبک های متعددی که Chart.js ارائه می دهد تا ما را قادر به ساخت نمودارهای زیبا می کند، بررسی خواهیم کرد.
شروع شدن
Chart.js یک چارچوب تجسم داده منبع باز که توسط جامعه نگهداری می شود محبوب است. این ما را قادر می سازد تا نمودارهای میله ای پاسخگو، نمودار دایره ای، نمودار خطی، نمودار دونات، نمودار پراکندگی، و غیره را تولید کنیم. تنها کاری که باید انجام دهیم این است که به سادگی مشخص کنیم کجا روی شما page می‌خواهید نموداری نمایش داده شود، چه نوع نموداری را می‌خواهید ترسیم کنید و سپس Chart.js را با داده‌ها، برچسب‌ها و تنظیمات دیگر عرضه کنید. بعد از آن، کتابخانه تمام کارهای سنگین را انجام می دهد!
نصب و راه اندازی
برای شروع کار با Chart.js، ابتدا باید آن را نصب کنیم زیرا یک کتابخانه شخص ثالث است. Chart.js ممکن است از طریق نصب شود npm، GitHub منتشر می شود، یا Chart.js CDN، که سریع ترین و آسان ترین روش است.
برای این راهنما، از Chart.js CDN استفاده خواهیم کرد. شما می توانید این کار را با دریافت آن انجام دهید آخرین پیوند CDN و آن را به پروژه خود اضافه کنید.
توجه داشته باشید: لطفا از URL با استفاده کنید Chart.min.js در پایان، زیرا این نسخه کوچک شده است.
در زمان نوشتن، آخرین نسخه 3.7.1 است. تنها کاری که باید انجام دهید این است که موارد زیر را به عنصر head فایل HTML خود اضافه کنید:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
پس از اتمام موفقیت آمیز، می توانیم از کتابخانه استفاده کنیم.
ایجاد نمودار با Chart.JS
برای این راهنما، ما انواع مختلفی از نمودارها را ایجاد می کنیم که محبوب ترین چارچوب های جاوا اسکریپت را برجسته می کنند روی تعداد ستاره های GitHub که در حال حاضر دارند. در اینجا اطلاعاتی است که ما استفاده خواهیم کرد:
| چارچوب جاوا اسکریپت | ستاره های GitHub |
|---|---|
| واکنش نشان دهید | 185,134 |
| Vue | 195,514 |
| زاویه ای | 80,460 |
| شیک | 57,022 |
| Ember.js | 22,165 |
| Backbone.js | 27,862 |
یک بوم برای نمایش نمودارها ایجاد کنید
اولین قدم این است که مکانی را در HTML خود برای نمایش نمودار ارائه دهیم. Chart.js متکی است روی در دسترس بودن تگ HTML5 Canvas (برای ترسیم خطوط، دایره ها و غیره استفاده می شود روی) برای تولید و ارائه نمودارها. اطلاعات بیشتر در مورد Canvas API را می‌توانید در اینجا پیدا کنید.
تنها کاری که باید انجام دهیم این است که آن را بسازیم canvas برچسب در body برچسب و ارائه کنید ID که باید fetch عنصر را فراخوانی کنیم و عنصر گراف مشخص شده خود را در جاوا اسکریپت ارجاع دهیم:
<canvas id="myChart" width="1000" height="600"></canvas>
توجه داشته باشید: ما ممکن است تماس بگیرید ID هر آنچه که ما می خواهیم، با این حال توصیه می شود که یک نام توصیفی انتخاب کنیم که نشان دهنده نوع نمودارهایی باشد که می خواهیم ایجاد کنیم. اگر نمودارهای زیادی را به a اضافه کنیم page، مهم است که مطمئن شویم که هر کدام ID متمایز است (برای مثال می‌توانیم به نمودارهای خود نام‌های خاص‌تری بدهیم، مانند studentsChart یا productChart، و غیره.).
در اینجا فایل HTML ما باید به شکلی باشد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<title>Programming Lang. Chart</title>
</head>
<body>
<canvas id="myChart" width="1000" height="600"></canvas>
<script src="./App.js"></script>
</body>
</html>
داده های ما را آماده و سازماندهی کنید
ما باید اطلاعات ارائه شده قبلی (فریم ورک ها و ستاره ها) را ذخیره کنیم. راحت‌ترین قالب برای ما ذخیره آن در یک شی است، جایی که کلیدها چارچوب‌ها و مقادیر نشان‌دهنده ستاره‌ها هستند. در ما App.js، بیایید خودمان را تعریف کنیم data:
const data = {
'React': 185134,
'Vue': 195514,
'Angular': 80460,
'Svelte': 57022,
'Ember.js': 22165,
'Backbone.js': 27862
};
ایجاد نمودار میله ای
بیایید با منطق اصلی شروع کنیم. روش ایجاد نمودار میله ای و بعداً روش ایجاد نمودارهای اضافی با تغییر آسان پارامترها را خواهیم دید. نکته مهم در مورد Chart.js این است که پس از ایجاد یک Chart شی – برای تغییر آن، فقط آن را تغییر دهید type نسبت دهید و همه چیز را همانطور که بود رها کنید!
اولین قدم برداشتن عنصر canvas از HTML با شناسه است myChart و آن را به a اختصاص دهید متن نوشته متغیر – معمولاً نامگذاری می شود ctx:
const ctx = document.getElementById('myChart').getContext('2d');
توجه داشته باشید: ممکن است متغیر را هر چه دوست داریم نامگذاری کنیم. ctx به سادگی الگویی است که اکثر توسعه دهندگان آن را ترجیح می دهند، و این همان چیزی است که ما از آن استفاده خواهیم کرد. .getContext('2d') یک روش اختیاری است که به ما امکان می دهد به قابلیت های ترسیم دوبعدی برچسب بوم دسترسی داشته باشیم.
برای ایجاد یک Chart شی، ما آن را می نامیم new Chart() سازنده، که دو آرگومان را می پذیرد:
ctx: شی زمینه، به عنصر بوم که ما رسم می کنیم ارجاع می دهد روی.- شیء پیکربندی: ما را قادر می سازد تا نوع نمودار، داده ها و پارامترهای نمودار را تنظیم کنیم.
const myChart = new Chart(ctx, {});
ما با شی پیکربندی کار خواهیم کرد تا به ما در ایجاد نمودار میله ای کمک کند. همانطور که قبلاً گفتیم، شی پیکربندی به ما امکان می دهد موارد زیر را مشخص کنیم:
- نوع نمودار: نوع نموداری که می خواهیم ایجاد کنیم. در این سناریو، ما یک نمودار میله ای می سازیم. ممکن است ارائه دهیم
type: 'pie'یاtype: 'line'اگر ما یک نمودار دایره ای یا خطی می خواستیم. - داده های نمودار: برچسب ها و مقادیری که برای ایجاد نمودارها استفاده می شود.
- گزینه های نمودار: گزینه های پیکربندی برای سفارشی کردن نمودارها، مانند تنظیم مکان افسانه، فعال/غیرفعال کردن پاسخگویی، سبک کنترل، و غیره روی.
بیایید یک شی پیکربندی اسکلت را تنظیم کنیم:
{
type: 'bar',
data: {},
options: {} // this is optional
}
سپس این شیء را می توان به نمونه نمودار ارسال کرد. بیایید داده های نمودار را در کنار آن اضافه کنیم type:
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: Object.keys(data),
datasets: (
{
label: 'Number of GitHub Stars',
data: Object.values(data),
},
),
},
});
از آنجایی که ما با یک شی سر و کار داریم – می توانیم کلیدها و مقادیر آن را از طریق آن استخراج کنیم Object.keys() و Object.values() مواد و روش ها. از طرف دیگر، می توانید برچسب ها و مقادیر را در آرایه های جداگانه نیز تهیه کنید!
درک ویژگی داده ها
برچسب ها و مجموعه داده ها دو ویژگی شی ویژگی داده هستند. برچسب ها آرایه ای از اجزایی را نشان می دهند که نشان داده می شوند روی محور X:
در حالی که datasets آرایه ای از اشیا را می گیرد که دارای دو ویژگی اساسی است:
label: رشته ای که معمولا نمایش داده می شود روی همانطور که در زیر مشاهده می کنید در بالای نمودار یا هنگام نگه داشتن میله ها:
data: آرایه ای از مقادیر که نشان داده شده است روی محور Y و اعداد ستاره های GitHub را در مثال ما منعکس می کند:
توجه داشته باشید: شما می توانید مجموعه داده های زیادی داشته باشید که هر کدام زیرنویس منحصر به فرد خود را دارند (label) و data. اگر چندین مجموعه داده را رسم کنید، رنگ های مختلف برای نشان دادن تفاوت کمک می کند. ما این مورد استفاده را در یک لحظه پوشش خواهیم داد.
به طور خلاصه – برای ترسیم نمودار میله ای، بوم/زمینه را آماده می کنیم و a را مقداردهی اولیه می کنیم Chart() با داده ها و برچسب های ما:
const data = {
'React': 185134,
'Vue': 195514,
'Angular': 80460,
'Svelte': 57022,
'Ember.js': 22165,
'Backbone.js': 27862
};
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: Object.keys(data),
datasets: (
{
label: 'Number of GitHub Stars',
data: Object.values(data),
},
),
},
});
وقتی مرورگر خود را به‌روزرسانی می‌کنید – page باید شامل موارد زیر باشد:
نمودار میله ای افقی
برای برگرداندن نمودار میله ای به یک نمودار افقی – شما مقدار را تنظیم می کنید indexAxis ملک یو y در options هدف – شی:
const myChart = new Chart(ctx, {
type: 'bar',
data: {
...
},
options: {
indexAxis: 'y',
}
});
توجه داشته باشید: در نسخه های قبلی Chart.js، شما جایگزین می کنید type:bar با type:horizontalBar، اگرچه این از آن زمان منسوخ شده است.
یک ظاهر طراحی نمودار نوار
در این مرحله، ما با موفقیت یک نمودار میله ای ایجاد کرده ایم! اگرچه، تجسم داده ها در مورد داستان سرایی است – نه فقط داده ها. ما معمولاً می خواهیم نمودار را از نظر بصری جذاب تر کنیم! علاوه بر این، سبک نکردن نمودار نه تنها می تواند آن را کسل کننده – بلکه ناخوانا کند. به عنوان مثال، اگر نمودار دایره‌ای دارای تمام گوه‌های یک رنگ باشد، واقعاً نمی‌توانید بین کلاس‌های مختلف تفاوت قائل شوید، مگر اینکه مرزهایی را به هر گوه اضافه کنید.
ما می توانیم برخی از این گزینه ها را از طریق: backgroundColor، borderColor و borderWidth .
backgroundColor – آرایه ای از مقادیر رنگی هگزا دسیمال یا RGBA (رشته ها) را می گیرد تا برای رنگ آمیزی میله های نمودار استفاده شود. این ممکن است با یک رنگ نیز انجام شود زیرا روی تمام نوارها اعمال می شود:
backgroundColor: 'red' // Setting all bars to red
// Or
backgroundColor: (
'rgba(255, 99, 132, 0.2)', // Bar 1
'rgba(54, 162, 235, 0.2)', // Bar 2
'rgba(255, 206, 86, 0.2)', // Bar 3
'rgba(75, 192, 192, 0.2)', // Bar 4
'rgba(153, 102, 255, 0.2)', // Bar 5
'rgba(255, 159, 64, 0.2)' // Bar 6
),
borderWidth – یک عدد صحیح یا یک مقدار شناور می گیرد و مشخص می کند که یک مرز چقدر باید باشد:
borderWidth: 2
borderColor – همان backgroundColor ویژگی، آرایه ای از رشته های ارزش رنگ را می پذیرد. مرزهای نوار را رنگی می کند:
borderColor: 'green' // Setting all borders to green
// Or
borderColor: (
'rgba(255, 99, 132, 1)', // Bar 1
'rgba(54, 162, 235, 1)', // Bar 2
'rgba(255, 206, 86, 1)', // Bar 3
'rgba(75, 192, 192, 1)', // Bar 4
'rgba(153, 102, 255, 1)', // Bar 5
'rgba(255, 159, 64, 1)' // Bar 6
),
توجه داشته باشید: همه این خواص و مقادیر آنها بخشی از data شی ، درست بعد از datasets.
با ترکیب اینها با هم، می‌توانید یک نمودار میله‌ای با سبک زیبا به صورت زیر ایجاد کنید:
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: Object.keys(data),
datasets: ({
label: 'Number of GitHub Stars',
data: Object.values(data),
}, ),
},
options: {
backgroundColor: (
'rgba(255, 99, 132, 0.2)', // Bar 1
'rgba(54, 162, 235, 0.2)', // Bar 2
'rgba(255, 206, 86, 0.2)', // Bar 3
'rgba(75, 192, 192, 0.2)', // Bar 4
'rgba(153, 102, 255, 0.2)', // Bar 5
'rgba(255, 159, 64, 0.2)' // Bar 6
),
borderWidth: 2,
borderColor: 'black'
}
});
روش کنترل عرض و ارتفاع نمودارها
تا کنون، اگر نمودار را در مرورگر خود مشاهده کرده اید، احتمالاً متوجه شده اید که مرورگر نمودار را تمام صفحه نمایش می دهد و به عرض و ارتفاعی که قبلاً تنظیم کرده بودیم احترام نمی گذارد. روی عنصر بوم:
<canvas id="myChart" width="800" height="400"></canvas>
برای حل این مشکل، باید تنظیماتی را به نمونه نمودار میله‌ای خود با ارسال چند گزینه در شی گزینه اضافه کنیم. این گزینه ها هستند:
maintainAspectRation: این تنظیم شده استfalseبرای احترام به ارتفاعی که قبلاً به بوم اضافه کردیم. این به این معنی است که نمودار من 400 پیکسل قد خواهد داشت.responsive: این تنظیم شده استfalseبرای به دست آوردن کنترل کامل بر عرض بوم.
const myChart = new Chart(ctx, {
type: 'bar',
data: {
// Data...
},
options: {
// ... Other options
maintainAspectRatio: false,
responsive: false
}
});
توضیح اینکه چگونه می توان با استفاده از CSS که روش دیگری برای کنترل عرض و ارتفاع نمودار شماست، این کار را توضیح داد. این گزینه به نشانه گذاری اضافی نیاز دارد، اما انعطاف پذیرتر است زیرا نمودار ما همچنان پاسخگو خواهد بود!
توجه داشته باشید: ما باید حذف کنیم options شی، و همچنین برچسب بوم height و width.
حالا بیایید تگ بوم را در یک بپیچیم div که برای استایل نمودار از آن استفاده می کنیم:
<div class="container">
<canvas id="myChart"></canvas>
</div>
در CSS ما، تنها کاری که باید انجام دهیم این است که a را اعمال کنیم max-width و آن را تنظیم کنید margin به 0 auto، بنابراین اندازه آن تغییر می کند و در وسط ظاهر می شود:
.container {
max-width: 800px;
margin: 0 auto;
}
وقتی مرورگر خود را مجدداً بارگذاری می‌کنید، متوجه می‌شوید که پاسخگو است و همچنین به آن احترام می‌گذارد max-width تنظیم!
ترسیم نمودارهای خطی، نمودارهای دونات، مناطق قطبی و نمودارهای رادار با Chart.js
ایجاد نمودار بسیار ساده است، تنها کاری که باید انجام دهیم این است که نوع آن را تغییر دهیم type: "bar" به نوع خاصی که می خواهید این می تواند باشد pie، horizontalBar، line، doughnut، radar، polarArea، scatter و غیره.
افزودن/به روز رسانی و حذف مجموعه داده ها از نمودارها
تا اینجا روش ساخت انواع نمودارها را در Chart.js دیدیم. بیایید ببینیم چگونه می توانیم داده های خود را اضافه و حذف کنیم موجود نمودار اکنون.
برای به روز رسانی نمودار – باید آن را به روز کنید
dataخاصیت شیءChartشیء کنید و آن را دوباره رندر کنید.
این data شی دارای الف است labels ویژگی (که در مورد ما با نام چارچوب مطابقت دارد) و a datasets ویژگی، جایی که هر مجموعه داده درون آن می تواند رسم شود. بیایید نگاهی به روش اضافه کردن نمونه های جدید به آن بیاندازیم data!
اضافه کردن داده ها
به طور کلی، یک رویکرد عمومی برای به روز رسانی نمودار شامل دسترسی به آن است data ویژگی، و فشار دادن برچسب ها و داده های جدید به مجموعه داده های آن، قبل از فراخوانی chart.update():
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
addData(myChart, 'SolidJS', 18200)
این update() متد قرار است پس از تغییر دادن فراخوانی شود data شیء، و با خیال راحت نمودار را به روز می کند. مقیاس‌ها، افسانه‌ها و کل نمودار را مجدداً ارائه می‌کند، بنابراین هرگونه تغییر ایجاد شده بدون تماس اضافی وجود خواهد داشت.
بیایید جلو برویم و خودمان را به روز کنیم data شیء (به عنوان خود نمودار اشتباه درک نشود data ویژگی) و به روش به روز رسانی نمودار با مقادیر جدید نگاه کنید.
افزودن داده های جدید به نمودارهای موجود
فرض کنید درخواستی دریافت می کنیم که در یک شی جاوا اسکریپت از سریال خارج شده و باید به نمودار اضافه شود. ما می توانیم از این عبور کنیم dataObj به ما data (پایگاه داده ساختگی) و جدید را اضافه کنید dataObj به نمودار:
function updateChart(chart, dataObj) {
// Saving the new incoming object into the mock database
Object.assign(data, dataObj);
// Push changes to the chart
chart.data.labels.push(Object.keys(dataObj));
chart.data.datasets.forEach((dataset) => {
dataset.data.push(Object.values(dataObj));
});
// Update chart
chart.update();
}
const newData = {'SolidJS': 18200};
updateChart(myChart, newData);
افزودن چندین نقطه داده به نمودارهای موجود
اگر بخواهیم چندین نقطه داده را با استفاده از این روش اضافه کنیم، متوجه خواهیم شد که همه آنها روی هم قرار می گیرند روی یک نقطه، از زمان گذشته است dataObj مستقیماً به نمودار اضافه می شود. برای افزودن چندین نقطه داده، می خواهیم داده ها را حلقه بزنیم و هر ویژگی (نام چارچوب) را به عنوان یک موجودیت جداگانه در آرایه فشار دهیم:
function updateChart(chart, dataObj) {
Object.assign(data, dataObj);
for (const property in dataObj) {
chart.data.labels.push(property);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(dataObj(property));
});
}
chart.update();
}
جایگزینی همه داده ها با داده های جدید
از زمانی که ما data به عنوان یک پایگاه داده عمل می کند – بیایید مثال را از قبل به اول به روز کنیم فروشگاه شی داده های ورودی را به پایگاه داده، و سپس به جای اضافه کردن داده ها از درخواست، داده ها را از پایگاه داده بکشید.
این بسیار بیشتر در امتداد مواردی است که در محیط های توسعه عملی با آن کار خواهید کرد. همانطور که قبلا، ما assign() جدید dataObj به data، اما به جای فشار دادن مقادیر به آرایه های موجود – آرایه ها را با تمام داده های واکشی شده از پایگاه داده جایگزین می کنیم:
function updateChart(chart, dataObj) {
// Store data into the database
Object.assign(data, dataObj);
// Fetch data from the database and replace old data
chart.data.labels = Object.keys(data);
chart.data.datasets.forEach((dataset) => {
dataset.data = Object.values(data);
});
chart.update();
}
const newData = {'SolidJS': 18200};
updateChart(myChart, newData);
این به طور بومی هنگام درج چندین شی نیز کار می کند:
const newData = {'SolidJS': 18200, 'SemanticUI': 50000 };
حذف داده ها از نمودارها
حذف داده برعکس افزودن آن است. pop() برعکس است push():
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
removeData(myChart);
pop() آخرین ورودی آرایه ها را حذف می کند، بنابراین فقط آخرین مورد حذف خواهد شد. به همین ترتیب، shift() اولی را حذف می کند اگرچه این به شما قدرت زیادی در مورد آنچه که حذف می شود نمی دهد.
به طور معمول، شما می خواهید حذف را هدف قرار دهید، در این صورت، مقداری که باید حذف شود ارسال می شود روی. خوشبختانه، حذف یک مقدار از یک شی واقعا آسان است:
function removeData(chart, val) {
// Delete entry from the database
delete data(val);
// Re-populate and re-render the chart
chart.data.labels = Object.keys(data);
chart.data.datasets.forEach((dataset) => {
dataset.data = Object.values(data);
});
chart.update();
}
removeData(myChart, "React");
استایل های بیشتر
حال بیایید نگاهی به چند گزینه استایل دیگر بیاندازیم که با Chart.js به راحتی قابل اجرا هستند.
استایل‌ها/پیکربندی‌های جهانی
Chart.js به ما اجازه می دهد تا برخی از پیکربندی های جهانی را که در آن تعریف شده اند، اعلام کنیم Chart.defaults.
بیایید از این برای تنظیم خانواده فونت، اندازه فونت، سبک فونت و وزن فونت چت خود در سطح جهانی استفاده کنیم، بنابراین برای هر متنی اعمال می شود. روی نمودار. این گزینه ها را می توان در Chart.defaults.font.
Chart.defaults.font.size = 10;
Chart.defaults.font.weight = 'bold';
Chart.defaults.font.family = 'Lato';
Chart.defaults.font.style = 'italic';
توجه داشته باشید: تنظیمات فونت جهانی فقط زمانی اعمال می شود که گزینه های خاص تری در پیکربندی یک نمودار جداگانه گنجانده نشده باشد.
به عنوان مثال، در این نمودار، متن دارای اندازه قلم 16 پیکسل خواهد بود به جز متن عنوان که اندازه خاصی به آن اختصاص داده شده است:
Chart.defaults.font.size = 16;
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
title: {
text: 'Popular JavaScript Frameworks',
font: {
size: 25,
},
},
},
},
});
توجه داشته باشید: همچنین می‌توانیم با استفاده از آن، رنگ سراسری را برای همه متون در چت خود اضافه کنیم Chart.defaults.color.
تنظیم عناوین
آ plugin در داخل options شی را می توان برای تعیین عنوان اضافه کرد:
options: {
...
plugins: {
title: {
display: true,
text: 'Popular JavaScript Frameworks',
font: {
size: 25
}
},
}
}
توجه داشته باشید: این سبک‌های بیشتری مانند موقعیت، بالشتک، فونت، و غیره را می‌پذیرد. جزئیات بیشتر در قسمت موجود است اسناد رسمی Chart.js.
افزودن افسانه ها
Legends یک راه عالی برای کمک به کاربران برای اتصال کلاس ها و برچسب های آنها به رنگ هایشان است. افسانه ها را نیز می توان با استفاده از سطح جهانی اعلام/استایل داد Chart.defaults.plugins.legend در صورتی که چندین نمودار دارید و نمی خواهید همان کد را تکرار کنید:
plugins: {
...
legend: {
display: true,
position: 'right'
}
}
توجه داشته باشید: برای نمودارهای دیگر به غیر از آنهایی که قبلا ذکر شد، بهتر است تنظیم کنید display به false.
نتیجه
تاکنون در این آموزش، ما توانسته‌ایم یاد بگیریم که چگونه از Chart.js برای ایجاد انواع نمودارها استفاده کنیم و همچنین ببینیم که چگونه می‌توانیم استایلی را اعمال کنیم که اگر روش درست کارکرد آن را نفهمید، می‌تواند بسیار مشکل باشد.
منتشر شده در 1403-01-10 18:52:06
