1504 lines
46 KiB
HTML
1504 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>مستند جامع تحلیل ApexOptions در ApexCharts</title>
|
||
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
|
||
<style>
|
||
:root {
|
||
--primary-color: #2c3e50;
|
||
--secondary-color: #3498db;
|
||
--accent-color: #e74c3c;
|
||
--success-color: #27ae60;
|
||
--bg-color: #f8f9fa;
|
||
--text-color: #333;
|
||
--code-bg: #282c34;
|
||
--code-text: #abb2bf;
|
||
--border-color: #e0e0e0;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Vazirmatn', Tahoma, sans-serif;
|
||
line-height: 1.8;
|
||
color: var(--text-color);
|
||
background-color: #fff;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.container {
|
||
max-width: 950px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
/* Header Styles */
|
||
.header {
|
||
border-bottom: 3px solid var(--secondary-color);
|
||
padding-bottom: 20px;
|
||
margin-bottom: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
.header-info h1 {
|
||
color: var(--primary-color);
|
||
font-size: 24px;
|
||
margin: 0 0 10px 0;
|
||
}
|
||
|
||
.header-info p {
|
||
margin: 5px 0;
|
||
font-size: 14px;
|
||
color: #555;
|
||
}
|
||
|
||
.company-badge {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.company-badge a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Content Styles */
|
||
h2 {
|
||
color: var(--secondary-color);
|
||
border-right: 4px solid var(--secondary-color);
|
||
padding-right: 15px;
|
||
margin-top: 40px;
|
||
font-size: 20px;
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
h3 {
|
||
color: var(--primary-color);
|
||
font-size: 18px;
|
||
margin-top: 25px;
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
h4 {
|
||
color: var(--success-color);
|
||
font-size: 16px;
|
||
margin-top: 20px;
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
p, li {
|
||
font-size: 15px;
|
||
}
|
||
|
||
ul, ol {
|
||
padding-right: 25px;
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* Table Styles */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
th, td {
|
||
border: 1px solid var(--border-color);
|
||
padding: 10px;
|
||
text-align: right;
|
||
}
|
||
|
||
th {
|
||
background-color: var(--secondary-color);
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
tr:nth-child(even) {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
/* Code Block Styles */
|
||
pre {
|
||
background-color: var(--code-bg);
|
||
color: var(--code-text);
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
font-family: 'Consolas', 'Monaco', monospace;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
direction: ltr;
|
||
text-align: left;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
code {
|
||
font-family: 'Consolas', 'Monaco', monospace;
|
||
}
|
||
|
||
p code {
|
||
background-color: #eee;
|
||
color: #c7254e;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
direction: ltr;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Info Box */
|
||
.info-box {
|
||
background-color: #e8f4fd;
|
||
border-right: 4px solid var(--secondary-color);
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.warning-box {
|
||
background-color: #fff3cd;
|
||
border-right: 4px solid #ffc107;
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Print Button */
|
||
.print-btn {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
left: 30px;
|
||
background-color: var(--secondary-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 50px;
|
||
font-family: 'Vazirmatn', sans-serif;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||
transition: background 0.3s;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.print-btn:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
|
||
/* Print Specific Styles */
|
||
@media print {
|
||
.no-print {
|
||
display: none !important;
|
||
}
|
||
body {
|
||
background-color: #fff;
|
||
font-size: 11pt;
|
||
}
|
||
.container {
|
||
max-width: 100%;
|
||
padding: 0;
|
||
}
|
||
.header {
|
||
border-bottom: 2px solid #000;
|
||
}
|
||
h2 {
|
||
color: #000;
|
||
border-right-color: #000;
|
||
}
|
||
h3, h4 {
|
||
color: #000;
|
||
}
|
||
pre {
|
||
background-color: #f4f4f4;
|
||
color: #000;
|
||
border: 1px solid #ddd;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
font-size: 10pt;
|
||
}
|
||
p code {
|
||
background-color: #f0f0f0;
|
||
color: #000;
|
||
border: 1px solid #ccc;
|
||
}
|
||
a {
|
||
text-decoration: none;
|
||
color: #000;
|
||
}
|
||
table {
|
||
font-size: 10pt;
|
||
}
|
||
th {
|
||
background-color: #ddd;
|
||
color: #000;
|
||
}
|
||
.info-box, .warning-box {
|
||
border: 1px solid #ccc;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<button class="print-btn no-print" onclick="window.print()">🖨️ ذخیره به عنوان PDF / چاپ</button>
|
||
|
||
<div class="container">
|
||
<!-- Header Section -->
|
||
<div class="header">
|
||
<div class="header-info">
|
||
<h1>مستند جامع تحلیل ApexOptions در ApexCharts</h1>
|
||
<p>📅 تاریخ تهیه: دوشنبه ۱۱ شهریور ۱۴۰۴</p>
|
||
<p>📌 موضوع: بررسی تفصیلی فیلدهای ApexOptions</p>
|
||
</div>
|
||
<div class="company-badge">
|
||
شرکت فن آوران ساحر علم<br>
|
||
<a href="https://saherelm.ir" target="_blank">https://saherelm.ir</a><br>
|
||
<span style="font-size: 12px; font-weight: normal; margin-top: 5px; display: block;">توسعهدهنده: هادی خزاعی اصل</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Introduction -->
|
||
<h2>۱. مقدمه</h2>
|
||
<p>
|
||
مدل <code>ApexOptions</code> قلب تپنده کتابخانه ApexCharts است و تمام تنظیمات نمودار را در بر میگیرد. این مدل شامل <strong>۲۵ فیلد اصلی</strong> است که هر کدام بخش خاصی از نمودار را کنترل میکنند. در این سند، هر فیلد به همراه زیرفیلدها، توضیحات و مثالهای کاربردی بررسی شده است.
|
||
</p>
|
||
|
||
<div class="info-box">
|
||
<strong>📌 نکته:</strong> تمام فیلدها اختیاری هستند و در صورت عدم تعریف، از مقادیر پیشفرض ApexCharts استفاده میشود.
|
||
</div>
|
||
|
||
<!-- Overview Table -->
|
||
<h2>۲. جدول کلی فیلدهای ApexOptions</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>ردیف</th>
|
||
<th>نام فیلد</th>
|
||
<th>توضیح</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>۱</td><td><code>annotations</code></td><td>حاشیهنویسیها (خطوط، نقاط، متنها)</td></tr>
|
||
<tr><td>۲</td><td><code>chart</code></td><td>تنظیمات اصلی نمودار (نوع، ابعاد، انیمیشن)</td></tr>
|
||
<tr><td>۳</td><td><code>colors</code></td><td>رنگهای سریهای داده</td></tr>
|
||
<tr><td>۴</td><td><code>dataLabels</code></td><td>برچسبهای داده روی نقاط</td></tr>
|
||
<tr><td>۵</td><td><code>drilldown</code></td><td>ناوبری عمیق (Drilldown)</td></tr>
|
||
<tr><td>۶</td><td><code>fill</code></td><td>پرکننده (رنگ، گرادیانت، الگو)</td></tr>
|
||
<tr><td>۷</td><td><code>forecastDataPoints</code></td><td>نقاط داده پیشبینی</td></tr>
|
||
<tr><td>۸</td><td><code>grid</code></td><td>شبکهبندی نمودار</td></tr>
|
||
<tr><td>۹</td><td><code>labels</code></td><td>برچسبهای نمودار</td></tr>
|
||
<tr><td>۱۰</td><td><code>legend</code></td><td>راهنمای نمودار</td></tr>
|
||
<tr><td>۱۱</td><td><code>markers</code></td><td>نشانگرهای نقاط</td></tr>
|
||
<tr><td>۱۲</td><td><code>noData</code></td><td>پیام عدم وجود داده</td></tr>
|
||
<tr><td>۱۳</td><td><code>plugins</code></td><td>افزونهها (Weave)</td></tr>
|
||
<tr><td>۱۴</td><td><code>plotOptions</code></td><td>گزینههای خاص هر نوع نمودار</td></tr>
|
||
<tr><td>۱۵</td><td><code>responsive</code></td><td>تنظیمات واکنشگرا</td></tr>
|
||
<tr><td>۱۶</td><td><code>series</code></td><td>سریهای داده</td></tr>
|
||
<tr><td>۱۷</td><td><code>states</code></td><td>حالتهای مختلف (hover, active)</td></tr>
|
||
<tr><td>۱۸</td><td><code>stroke</code></td><td>خطوط نمودار</td></tr>
|
||
<tr><td>۱۹</td><td><code>subtitle</code></td><td>زیرعنوان</td></tr>
|
||
<tr><td>۲۰</td><td><code>theme</code></td><td>تم (روشن/تاریک)</td></tr>
|
||
<tr><td>۲۱</td><td><code>title</code></td><td>عنوان نمودار</td></tr>
|
||
<tr><td>۲۲</td><td><code>tooltip</code></td><td>Tooltip (راهنمای شناور)</td></tr>
|
||
<tr><td>۲۳</td><td><code>xaxis</code></td><td>محور X</td></tr>
|
||
<tr><td>۲۴</td><td><code>yaxis</code></td><td>محور Y</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Detailed Analysis -->
|
||
<h2>۳. بررسی تفصیلی فیلدها</h2>
|
||
|
||
<!-- annotations -->
|
||
<h3>۳.۱. فیلد <code>annotations</code> - حاشیهنویسیها</h3>
|
||
<p>این فیلد برای اضافه کردن حاشیهنویسیهای سفارشی (خطوط، نقاط، متنها) به نمودار استفاده میشود.</p>
|
||
|
||
<h4>زیرفیلدها:</h4>
|
||
<ul>
|
||
<li><code>xaxis</code>: حاشیهنویسیهای محور X (خطوط عمودی)</li>
|
||
<li><code>yaxis</code>: حاشیهنویسیهای محور Y (خطوط افقی)</li>
|
||
<li><code>points</code>: حاشیهنویسیهای نقطهای</li>
|
||
<li><code>texts</code>: متنهای سفارشی</li>
|
||
<li><code>images</code>: تصاویر سفارشی</li>
|
||
</ul>
|
||
|
||
<h4>ساختار XAxisAnnotations:</h4>
|
||
<pre><code>xaxis?: [
|
||
{
|
||
id?: number | string;
|
||
x?: null | number | string;
|
||
x2?: null | number | string;
|
||
strokeDashArray?: number;
|
||
fillColor?: string;
|
||
borderColor?: string;
|
||
borderWidth?: number;
|
||
opacity?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
label?: {
|
||
text?: string | string[];
|
||
textAnchor?: string;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
style?: {
|
||
background?: string;
|
||
color?: string;
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
padding?: { left?: number; right?: number; top?: number; bottom?: number; };
|
||
};
|
||
};
|
||
}
|
||
]</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>annotations: {
|
||
xaxis: [{
|
||
x: new Date('2024-06-01').getTime(),
|
||
borderColor: '#FF0000',
|
||
label: {
|
||
borderColor: '#FF0000',
|
||
style: { color: '#fff', background: '#FF0000' },
|
||
text: 'تاریخ مهم'
|
||
}
|
||
}],
|
||
yaxis: [{
|
||
y: 50,
|
||
borderColor: '#00FF00',
|
||
label: { text: 'خط هدف', style: { color: '#00FF00' } }
|
||
}],
|
||
points: [{
|
||
x: 'فروردین',
|
||
y: 50,
|
||
marker: { size: 8, fillColor: '#FF0000' },
|
||
label: { text: 'نقطه مهم' }
|
||
}]
|
||
}</code></pre>
|
||
|
||
<!-- chart -->
|
||
<h3>۳.۲. فیلد <code>chart</code> - تنظیمات اصلی نمودار</h3>
|
||
<p>این فیلد مهمترین بخش تنظیمات است و رفتار کلی نمودار را کنترل میکند.</p>
|
||
|
||
<h4>زیرفیلدهای اصلی:</h4>
|
||
<ul>
|
||
<li><code>width</code>: عرض نمودار (عدد یا درصد)</li>
|
||
<li><code>height</code>: ارتفاع نمودار (عدد یا درصد)</li>
|
||
<li><code>type</code>: نوع نمودار (line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, violin, histogram, radar, polarArea, rangeBar, rangeArea, treemap, waffle, sunburst, funnel, pyramid, gauge)</li>
|
||
<li><code>foreColor</code>: رنگ متن پیشزمینه</li>
|
||
<li><code>fontFamily</code>: فونت متن</li>
|
||
<li><code>background</code>: رنگ پسزمینه</li>
|
||
<li><code>animations</code>: تنظیمات انیمیشن</li>
|
||
<li><code>events</code>: رویدادهای نمودار</li>
|
||
<li><code>toolbar</code>: نوار ابزار</li>
|
||
<li><code>zoom</code>: تنظیمات زوم</li>
|
||
<li><code>selection</code>: تنظیمات انتخاب</li>
|
||
<li><code>stacked</code>: نمودار پشتهای</li>
|
||
<li><code>stackType</code>: نوع پشته (normal, 100%)</li>
|
||
</ul>
|
||
|
||
<h4>ساختار chart:</h4>
|
||
<pre><code>chart: {
|
||
width?: string | number;
|
||
height?: string | number;
|
||
type?: 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' |
|
||
'scatter' | 'bubble' | 'heatmap' | 'candlestick' |
|
||
'boxPlot' | 'violin' | 'histogram' | 'radar' |
|
||
'polarArea' | 'rangeBar' | 'rangeArea' | 'treemap' |
|
||
'waffle' | 'sunburst' | 'funnel' | 'pyramid' | 'gauge';
|
||
foreColor?: string;
|
||
fontFamily?: string;
|
||
background?: string;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
dropShadow?: {
|
||
enabled?: boolean;
|
||
top?: number;
|
||
left?: number;
|
||
blur?: number;
|
||
opacity?: number;
|
||
color?: string | string[];
|
||
};
|
||
events?: {
|
||
animationEnd?(chart: ApexCharts, options?: any): void;
|
||
beforeMount?(chart: ApexCharts, options?: any): void;
|
||
mounted?(chart: ApexCharts, options?: any): void;
|
||
updated?(chart: ApexCharts, options?: any): void;
|
||
mouseMove?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
|
||
mouseLeave?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
|
||
click?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
|
||
legendClick?(chart: ApexCharts, seriesIndex?: number, options?: any): void;
|
||
markerClick?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
|
||
selection?(chart: ApexCharts, options?: any): void;
|
||
dataPointSelection?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
|
||
dataPointMouseEnter?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
|
||
dataPointMouseLeave?(e: MouseEvent, chart?: ApexCharts, options?: any): void;
|
||
beforeZoom?(chart: ApexCharts, options?: any): boolean | void;
|
||
beforeResetZoom?(chart: ApexCharts, options?: any): boolean | void;
|
||
zoomed?(chart: ApexCharts, options?: any): void;
|
||
scrolled?(chart: ApexCharts, options?: any): void;
|
||
brushScrolled?(chart: ApexCharts, options?: any): void;
|
||
};
|
||
animations?: {
|
||
enabled?: boolean;
|
||
easing?: 'linear' | 'easeInSine' | 'easeOutSine' | 'easeInOutSine' |
|
||
'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' |
|
||
'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | string |
|
||
[number, number, number, number] | ((t: number) => number);
|
||
speed?: number;
|
||
animateGradually?: { enabled?: boolean; delay?: number; };
|
||
dynamicAnimation?: { enabled?: boolean; speed?: number; easing?: string; };
|
||
};
|
||
toolbar?: {
|
||
show?: boolean;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
tools?: {
|
||
download?: boolean | string;
|
||
selection?: boolean | string;
|
||
zoom?: boolean | string;
|
||
zoomin?: boolean | string;
|
||
zoomout?: boolean | string;
|
||
pan?: boolean | string;
|
||
reset?: boolean | string;
|
||
measure?: boolean | string;
|
||
customIcons?: Array<{
|
||
icon?: string;
|
||
title?: string;
|
||
index?: number;
|
||
class?: string;
|
||
click?(chart: ApexCharts, options?: any, e?: MouseEvent): void;
|
||
}>;
|
||
};
|
||
export?: {
|
||
csv?: { filename?: string; columnDelimiter?: string; headerCategory?: string; headerValue?: string; };
|
||
svg?: { filename?: string; };
|
||
png?: { filename?: string; };
|
||
};
|
||
autoSelected?: 'zoom' | 'selection' | 'pan' | 'measure';
|
||
};
|
||
zoom?: {
|
||
enabled?: boolean;
|
||
type?: 'x' | 'y' | 'xy';
|
||
autoScaleYaxis?: boolean;
|
||
allowMouseWheelZoom?: boolean | 'auto';
|
||
pinch?: boolean | 'auto';
|
||
zoomedArea?: {
|
||
fill?: { color?: string; opacity?: number; };
|
||
stroke?: { color?: string; opacity?: number; width?: number; };
|
||
};
|
||
};
|
||
selection?: {
|
||
enabled?: boolean;
|
||
type?: string;
|
||
fill?: { color?: string; opacity?: number; };
|
||
stroke?: { width?: number; color?: string; opacity?: number; dashArray?: number; };
|
||
xaxis?: { min?: number; max?: number; };
|
||
yaxis?: { min?: number; max?: number; };
|
||
};
|
||
stacked?: boolean;
|
||
stackType?: 'normal' | '100%';
|
||
id?: string;
|
||
group?: string;
|
||
locales?: Array<{ name?: string; options?: any; }>;
|
||
defaultLocale?: string;
|
||
parentHeightOffset?: number;
|
||
redrawOnParentResize?: boolean;
|
||
redrawOnWindowResize?: boolean | ((...args: any[]) => boolean);
|
||
sparkline?: { enabled?: boolean; };
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>chart: {
|
||
type: 'line',
|
||
height: 350,
|
||
foreColor: '#333',
|
||
fontFamily: 'Vazirmatn, sans-serif',
|
||
animations: {
|
||
enabled: true,
|
||
easing: 'easeInOutCubic',
|
||
speed: 800,
|
||
animateGradually: { enabled: true, delay: 150 },
|
||
dynamicAnimation: { enabled: true, speed: 350 }
|
||
},
|
||
toolbar: {
|
||
show: true,
|
||
tools: {
|
||
download: true,
|
||
zoom: true,
|
||
zoomin: true,
|
||
zoomout: true,
|
||
reset: true,
|
||
customIcons: [{
|
||
icon: '<svg>...</svg>',
|
||
title: 'دکمه سفارشی',
|
||
index: 0,
|
||
click: (chart, options, e) => { console.log('کلیک شد'); }
|
||
}]
|
||
}
|
||
},
|
||
zoom: {
|
||
enabled: true,
|
||
type: 'x',
|
||
autoScaleYaxis: false
|
||
},
|
||
events: {
|
||
mounted: (chart, options) => { console.log('نمودار نصب شد'); },
|
||
dataPointSelection: (e, chart, options) => { console.log('نقطه انتخاب شد'); }
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- colors -->
|
||
<h3>۳.۳. فیلد <code>colors</code> - رنگهای سریهای داده</h3>
|
||
<p>آرایهای از رنگها برای سریهای داده. هر سری با یک رنگ متفاوت نمایش داده میشود.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>colors?: Array<string | ((opts: {
|
||
value: number;
|
||
seriesIndex: number;
|
||
dataPointIndex: number;
|
||
w: any;
|
||
}) => string)></code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>// رنگهای ثابت
|
||
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']
|
||
|
||
// رنگهای داینامیک بر اساس مقدار
|
||
colors: [
|
||
function({ value, seriesIndex, dataPointIndex }) {
|
||
return value > 50 ? '#00E396' : '#FF4560';
|
||
}
|
||
]</code></pre>
|
||
|
||
<!-- dataLabels -->
|
||
<h3>۳.۴. فیلد <code>dataLabels</code> - برچسبهای داده</h3>
|
||
<p>برچسبهایی که روی نقاط داده نمایش داده میشوند.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>dataLabels?: {
|
||
enabled?: boolean;
|
||
enabledOnSeries?: number[];
|
||
formatter?(val: string | number | number[], opts?: any): string | number | (string | number)[];
|
||
textAnchor?: 'start' | 'middle' | 'end';
|
||
distributed?: boolean;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
style?: {
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
colors?: string[];
|
||
};
|
||
background?: {
|
||
enabled?: boolean;
|
||
foreColor?: string;
|
||
borderRadius?: number;
|
||
padding?: number;
|
||
opacity?: number;
|
||
borderWidth?: number;
|
||
borderColor?: string;
|
||
dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
|
||
};
|
||
dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>dataLabels: {
|
||
enabled: true,
|
||
formatter: (val) => val + '%',
|
||
style: {
|
||
fontSize: '12px',
|
||
fontFamily: 'Vazirmatn',
|
||
colors: ['#fff']
|
||
},
|
||
background: {
|
||
enabled: true,
|
||
foreColor: '#fff',
|
||
borderRadius: 4,
|
||
padding: 4,
|
||
borderColor: '#000',
|
||
borderWidth: 1
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- fill -->
|
||
<h3>۳.۵. فیلد <code>fill</code> - پرکننده</h3>
|
||
<p>تنظیمات پرکننده (رنگ، گرادیانت، الگو، تصویر).</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>fill?: {
|
||
colors?: string[];
|
||
opacity?: number | number[];
|
||
type?: string | string[];
|
||
gradient?: {
|
||
shade?: string;
|
||
type?: string;
|
||
shadeIntensity?: number;
|
||
gradientToColors?: string[];
|
||
inverseColors?: boolean;
|
||
opacityFrom?: number | number[];
|
||
opacityTo?: number | number[];
|
||
stops?: number[];
|
||
colorStops?: Array<{ offset: number; color: string; opacity: number; }> | Array<Array<{ offset: number; color: string; opacity: number; }>>;
|
||
};
|
||
image?: {
|
||
src?: string | string[];
|
||
width?: number;
|
||
height?: number;
|
||
};
|
||
pattern?: {
|
||
style?: string | string[];
|
||
width?: number;
|
||
height?: number;
|
||
strokeWidth?: number;
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>fill: {
|
||
type: 'gradient',
|
||
gradient: {
|
||
shade: 'light',
|
||
type: 'vertical',
|
||
shadeIntensity: 0.5,
|
||
gradientToColors: ['#008FFB', '#00E396'],
|
||
opacityFrom: 1,
|
||
opacityTo: 0.5,
|
||
stops: [0, 50, 100]
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- grid -->
|
||
<h3>۳.۶. فیلد <code>grid</code> - شبکهبندی</h3>
|
||
<p>تنظیمات شبکهبندی نمودار.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>grid?: {
|
||
show?: boolean;
|
||
borderColor?: string;
|
||
strokeDashArray?: number;
|
||
position?: 'front' | 'back';
|
||
xaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?: number; }; };
|
||
yaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?: number; }; };
|
||
row?: { colors?: string[]; opacity?: number; };
|
||
column?: { colors?: string[]; opacity?: number; };
|
||
padding?: { top?: number; right?: number; bottom?: number; left?: number; };
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>grid: {
|
||
show: true,
|
||
borderColor: '#e0e0e0',
|
||
strokeDashArray: 4,
|
||
position: 'back',
|
||
row: { colors: ['#f3f3f3', 'transparent'], opacity: 0.5 },
|
||
padding: { top: 0, right: 10, bottom: 0, left: 10 }
|
||
}</code></pre>
|
||
|
||
<!-- legend -->
|
||
<h3>۳.۷. فیلد <code>legend</code> - راهنمای نمودار</h3>
|
||
<p>تنظیمات راهنمای نمودار (Legend).</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>legend?: {
|
||
show?: boolean;
|
||
showForSingleSeries?: boolean;
|
||
showForNullSeries?: boolean;
|
||
showForZeroSeries?: boolean;
|
||
floating?: boolean;
|
||
inverseOrder?: boolean;
|
||
position?: 'top' | 'right' | 'bottom' | 'left';
|
||
horizontalAlign?: 'left' | 'center' | 'right';
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
width?: number;
|
||
height?: number;
|
||
formatter?(legendName: string, opts?: { seriesIndex: number; w: any; }): string;
|
||
tooltipHoverFormatter?(legendName: string, opts?: { seriesIndex: number; w: any; }): string;
|
||
customLegendItems?: string[];
|
||
labels?: { colors?: string | string[]; useSeriesColors?: boolean; };
|
||
markers?: {
|
||
width?: number;
|
||
height?: number;
|
||
strokeColor?: string;
|
||
strokeWidth?: number;
|
||
radius?: number;
|
||
customHTML?(): any;
|
||
onClick?(): void;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
};
|
||
itemMargin?: { horizontal?: number; vertical?: number; };
|
||
onItemClick?: { toggleDataSeries?: boolean; };
|
||
onItemHover?: { highlightDataSeries?: boolean; };
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>legend: {
|
||
show: true,
|
||
position: 'top',
|
||
horizontalAlign: 'center',
|
||
fontSize: '14px',
|
||
fontFamily: 'Vazirmatn',
|
||
markers: { width: 12, height: 12, radius: 6 },
|
||
onItemClick: { toggleDataSeries: true },
|
||
onItemHover: { highlightDataSeries: true }
|
||
}</code></pre>
|
||
|
||
<!-- markers -->
|
||
<h3>۳.۸. فیلد <code>markers</code> - نشانگرها</h3>
|
||
<p>تنظیمات نشانگرهای نقاط داده.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>markers?: {
|
||
size?: number | number[];
|
||
colors?: string | string[];
|
||
strokeColors?: string | string[];
|
||
strokeWidth?: number | number[];
|
||
strokeOpacity?: number | number[];
|
||
strokeDashArray?: number | number[];
|
||
fillOpacity?: number | number[];
|
||
discrete?: Array<{
|
||
seriesIndex?: number;
|
||
dataPointIndex?: number;
|
||
fillColor?: string;
|
||
strokeColor?: string;
|
||
size?: number;
|
||
}>;
|
||
shape?: 'circle' | 'square' | 'rect';
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
hover?: { size?: number; sizeOffset?: number; };
|
||
onClick?(e?: any): void;
|
||
onDblClick?(e?: any): void;
|
||
showNullDataPoints?: boolean;
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>markers: {
|
||
size: 6,
|
||
colors: ['#008FFB'],
|
||
strokeColors: '#fff',
|
||
strokeWidth: 2,
|
||
hover: { size: 8, sizeOffset: 3 },
|
||
discrete: [{
|
||
seriesIndex: 0,
|
||
dataPointIndex: 3,
|
||
fillColor: '#FF0000',
|
||
size: 10
|
||
}]
|
||
}</code></pre>
|
||
|
||
<!-- plotOptions -->
|
||
<h3>۳.۹. فیلد <code>plotOptions</code> - گزینههای خاص هر نوع نمودار</h3>
|
||
<p>این فیلد تنظیمات خاص هر نوع نمودار را شامل میشود.</p>
|
||
|
||
<h4>ساختار (خلاصه):</h4>
|
||
<pre><code>plotOptions?: {
|
||
bar?: {
|
||
horizontal?: boolean;
|
||
columnWidth?: string | number;
|
||
barHeight?: string | number;
|
||
distributed?: boolean;
|
||
borderRadius?: number;
|
||
borderRadiusApplication?: 'around' | 'end';
|
||
borderRadiusWhenStacked?: 'all' | 'last';
|
||
hideZeroBarsWhenGrouped?: boolean;
|
||
rangeBarOverlap?: boolean;
|
||
rangeBarGroupRows?: boolean;
|
||
isDumbbell?: boolean;
|
||
dumbbellColors?: string[][];
|
||
colors?: {
|
||
ranges?: Array<{ from?: number; to?: number; color?: string; }>;
|
||
backgroundBarColors?: string[];
|
||
backgroundBarOpacity?: number;
|
||
backgroundBarRadius?: number;
|
||
};
|
||
dataLabels?: {
|
||
maxItems?: number;
|
||
hideOverflowingLabels?: boolean;
|
||
position?: string;
|
||
orientation?: 'horizontal' | 'vertical';
|
||
total?: {
|
||
enabled?: boolean;
|
||
formatter?(val?: string, opts?: any): string;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
style?: { color?: string; fontSize?: string; fontFamily?: string; fontWeight?: string | number; };
|
||
};
|
||
};
|
||
};
|
||
bubble?: { minBubbleRadius?: number; maxBubbleRadius?: number; };
|
||
candlestick?: {
|
||
colors?: { upward?: string | string[]; downward?: string | string[]; };
|
||
wick?: { useFillColor?: boolean; };
|
||
};
|
||
boxPlot?: {
|
||
colors?: { upper?: string | string[]; lower?: string | string[]; };
|
||
};
|
||
heatmap?: {
|
||
radius?: number;
|
||
enableShades?: boolean;
|
||
shadeIntensity?: number;
|
||
reverseNegativeShade?: boolean;
|
||
distributed?: boolean;
|
||
useFillColorAsStroke?: boolean;
|
||
colorScale?: {
|
||
ranges?: Array<{ from?: number; to?: number; color?: string; foreColor?: string; name?: string; }>;
|
||
inverse?: boolean;
|
||
min?: number;
|
||
max?: number;
|
||
};
|
||
};
|
||
treemap?: {
|
||
enableShades?: boolean;
|
||
shadeIntensity?: number;
|
||
distributed?: boolean;
|
||
reverseNegativeShade?: boolean;
|
||
useFillColorAsStroke?: boolean;
|
||
dataLabels?: { format?: 'scale' | 'truncate'; };
|
||
borderRadius?: number;
|
||
colorScale?: {
|
||
inverse?: boolean;
|
||
ranges?: Array<{ from?: number; to?: number; color?: string; foreColor?: string; name?: string; }>;
|
||
min?: number;
|
||
max?: number;
|
||
};
|
||
};
|
||
pie?: {
|
||
startAngle?: number;
|
||
endAngle?: number;
|
||
customScale?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
expandOnClick?: boolean;
|
||
expandOffset?: number;
|
||
dataLabels?: { offset?: number; };
|
||
};
|
||
donut?: {
|
||
size?: string;
|
||
background?: string;
|
||
labels?: {
|
||
show?: boolean;
|
||
name?: { show?: boolean; fontSize?: string; fontFamily?: string; fontWeight?: string | number; offsetY?: number; color?: string; formatter?(val: string): string; };
|
||
value?: { show?: boolean; fontSize?: string; fontFamily?: string; fontWeight?: string | number; offsetY?: number; color?: string; formatter?(val: number | string): string; };
|
||
total?: { show?: boolean; showAlways?: boolean; label?: string; color?: string; fontFamily?: string; fontWeight?: string | number; fontSize?: string; formatter?(w: any): string; };
|
||
};
|
||
};
|
||
radialBar?: {
|
||
inverseOrder?: boolean;
|
||
startAngle?: number;
|
||
endAngle?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
hollow?: {
|
||
margin?: number;
|
||
size?: string;
|
||
background?: string;
|
||
image?: string;
|
||
imageWidth?: number;
|
||
imageHeight?: number;
|
||
imageOffsetX?: number;
|
||
imageOffsetY?: number;
|
||
imageClipped?: boolean;
|
||
position?: 'front' | 'back';
|
||
dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
|
||
};
|
||
track?: {
|
||
show?: boolean;
|
||
startAngle?: number;
|
||
endAngle?: number;
|
||
background?: string | string[];
|
||
strokeWidth?: string;
|
||
opacity?: number;
|
||
margin?: number;
|
||
dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
|
||
};
|
||
dataLabels?: {
|
||
show?: boolean;
|
||
name?: { show?: boolean; fontSize?: string; fontFamily?: string; fontWeight?: string | number; offsetY?: number; color?: string; };
|
||
value?: { show?: boolean; fontSize?: string; fontFamily?: string; fontWeight?: string | number; offsetY?: number; color?: string; formatter?(val: number): string; };
|
||
total?: { show?: boolean; label?: string; color?: string; fontFamily?: string; fontWeight?: string | number; fontSize?: string; formatter?(w: any): string; };
|
||
};
|
||
};
|
||
radar?: {
|
||
size?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
polygons?: {
|
||
strokeColors?: string | string[];
|
||
strokeWidth?: string | number[];
|
||
connectorColors?: string | string[];
|
||
fill?: { colors?: string[]; };
|
||
};
|
||
};
|
||
polarArea?: {
|
||
rings?: { strokeColor?: string; strokeWidth?: number; };
|
||
spokes?: { connectorColors?: string | string[]; strokeWidth?: number; };
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی (Bar):</h4>
|
||
<pre><code>plotOptions: {
|
||
bar: {
|
||
horizontal: false,
|
||
columnWidth: '70%',
|
||
borderRadius: 4,
|
||
borderRadiusApplication: 'end',
|
||
distributed: false,
|
||
dataLabels: {
|
||
position: 'top',
|
||
maxItems: 100,
|
||
hideOverflowingLabels: true
|
||
}
|
||
}
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی (Pie):</h4>
|
||
<pre><code>plotOptions: {
|
||
pie: {
|
||
startAngle: 0,
|
||
endAngle: 360,
|
||
expandOnClick: true,
|
||
expandOffset: 10,
|
||
dataLabels: { offset: 0 }
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- responsive -->
|
||
<h3>۳.۱۰. فیلد <code>responsive</code> - تنظیمات واکنشگرا</h3>
|
||
<p>تنظیمات واکنشگرا برای اندازههای مختلف صفحه.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>responsive?: Array<{
|
||
breakpoint?: number;
|
||
options?: ApexOptions;
|
||
}></code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>responsive: [
|
||
{
|
||
breakpoint: 480,
|
||
options: {
|
||
chart: { width: '100%', height: 250 },
|
||
legend: { position: 'bottom' }
|
||
}
|
||
},
|
||
{
|
||
breakpoint: 768,
|
||
options: {
|
||
chart: { width: '100%', height: 300 },
|
||
legend: { position: 'bottom' }
|
||
}
|
||
}
|
||
]</code></pre>
|
||
|
||
<!-- states -->
|
||
<h3>۳.۱۱. فیلد <code>states</code> - حالتهای مختلف</h3>
|
||
<p>تنظیمات حالتهای مختلف (hover, active).</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>states?: {
|
||
hover?: {
|
||
filter?: {
|
||
type?: 'none' | 'lighten' | 'darken';
|
||
value?: number;
|
||
};
|
||
};
|
||
active?: {
|
||
allowMultipleDataPointsSelection?: boolean;
|
||
filter?: {
|
||
type?: 'none' | 'lighten' | 'darken';
|
||
value?: number;
|
||
};
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>states: {
|
||
hover: {
|
||
filter: { type: 'darken', value: 0.15 }
|
||
},
|
||
active: {
|
||
allowMultipleDataPointsSelection: false,
|
||
filter: { type: 'darken', value: 0.35 }
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- stroke -->
|
||
<h3>۳.۱۲. فیلد <code>stroke</code> - خطوط نمودار</h3>
|
||
<p>تنظیمات خطوط نمودار.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>stroke?: {
|
||
show?: boolean;
|
||
curve?: 'smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic' |
|
||
('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[];
|
||
lineCap?: 'butt' | 'square' | 'round';
|
||
colors?: string[];
|
||
width?: number | number[];
|
||
dashArray?: number | number[];
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>stroke: {
|
||
show: true,
|
||
curve: 'smooth',
|
||
lineCap: 'round',
|
||
colors: ['#008FFB'],
|
||
width: 3,
|
||
dashArray: 0
|
||
}</code></pre>
|
||
|
||
<!-- theme -->
|
||
<h3>۳.۱۳. فیلد <code>theme</code> - تم</h3>
|
||
<p>تنظیمات تم (روشن/تاریک).</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>theme?: {
|
||
mode?: 'light' | 'dark' | '';
|
||
palette?: string;
|
||
monochrome?: {
|
||
enabled?: boolean;
|
||
color?: string;
|
||
shadeTo?: 'light' | 'dark';
|
||
shadeIntensity?: number;
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>theme: {
|
||
mode: 'light',
|
||
palette: 'palette1',
|
||
monochrome: {
|
||
enabled: false,
|
||
color: '#008FFB',
|
||
shadeTo: 'light',
|
||
shadeIntensity: 0.65
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- title & subtitle -->
|
||
<h3>۳.۱۴. فیلدهای <code>title</code> و <code>subtitle</code> - عنوان و زیرعنوان</h3>
|
||
<p>تنظیمات عنوان و زیرعنوان نمودار.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>title?: {
|
||
text?: string;
|
||
align?: 'left' | 'center' | 'right';
|
||
margin?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
floating?: boolean;
|
||
style?: {
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
color?: string;
|
||
};
|
||
}
|
||
|
||
subtitle?: {
|
||
text?: string;
|
||
align?: 'left' | 'center' | 'right';
|
||
margin?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
floating?: boolean;
|
||
style?: {
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
color?: string;
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>title: {
|
||
text: 'نمودار فروش ماهانه',
|
||
align: 'center',
|
||
margin: 10,
|
||
style: {
|
||
fontSize: '18px',
|
||
fontFamily: 'Vazirmatn',
|
||
fontWeight: 'bold',
|
||
color: '#333'
|
||
}
|
||
},
|
||
subtitle: {
|
||
text: 'آمار فروش سال ۱۴۰۳',
|
||
align: 'center',
|
||
style: {
|
||
fontSize: '14px',
|
||
color: '#666'
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- tooltip -->
|
||
<h3>۳.۱۵. فیلد <code>tooltip</code> - Tooltip</h3>
|
||
<p>تنظیمات Tooltip (راهنمای شناور).</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>tooltip?: {
|
||
enabled?: boolean;
|
||
enabledOnSeries?: number[];
|
||
shared?: boolean;
|
||
followCursor?: boolean;
|
||
intersect?: boolean;
|
||
inverseOrder?: boolean;
|
||
arrow?: boolean;
|
||
custom?: Array<(opts: {
|
||
series: number[][];
|
||
seriesIndex: number;
|
||
dataPointIndex: number;
|
||
y1?: number;
|
||
y2?: number;
|
||
w: any;
|
||
}) => string>;
|
||
fillSeriesColor?: boolean;
|
||
theme?: 'light' | 'dark';
|
||
style?: {
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
};
|
||
onDatasetHover?: { highlightDataSeries?: boolean; };
|
||
x?: {
|
||
show?: boolean;
|
||
format?: string;
|
||
formatter?(value: string | number, opts?: any): string;
|
||
};
|
||
y?: Array<{
|
||
title?: { title?: string; formatter?(seriesName: string, opts?: any): string; };
|
||
formatter?(value: number, opts?: any): string;
|
||
}>;
|
||
marker?: { show?: boolean; fillColors?: string[]; };
|
||
items?: { display?: string; };
|
||
fixed?: {
|
||
enabled?: boolean;
|
||
position?: string;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>tooltip: {
|
||
enabled: true,
|
||
shared: true,
|
||
followCursor: false,
|
||
intersect: false,
|
||
theme: 'light',
|
||
style: { fontSize: '12px', fontFamily: 'Vazirmatn' },
|
||
x: { show: true, format: 'dd MMM' },
|
||
y: [{
|
||
title: { title: 'فروش: ' },
|
||
formatter: (val) => val.toLocaleString('fa-IR') + ' تومان'
|
||
}],
|
||
marker: { show: true }
|
||
}</code></pre>
|
||
|
||
<!-- xaxis -->
|
||
<h3>۳.۱۶. فیلد <code>xaxis</code> - محور X</h3>
|
||
<p>تنظیمات محور X.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>xaxis?: {
|
||
type?: 'category' | 'datetime' | 'numeric';
|
||
categories?: Array<string | number> | Array<Array<string | number>>;
|
||
overwriteCategories?: number[] | string[];
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
sorted?: boolean;
|
||
labels?: {
|
||
show?: boolean;
|
||
rotate?: number;
|
||
rotateAlways?: boolean;
|
||
hideOverlappingLabels?: boolean;
|
||
showDuplicates?: boolean;
|
||
trim?: boolean;
|
||
minHeight?: number;
|
||
maxHeight?: number;
|
||
style?: {
|
||
colors?: string | string[];
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
cssClass?: string;
|
||
};
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
format?: string;
|
||
formatter?(value: string | number, timestamp?: number, opts?: any): string | string[];
|
||
datetimeUTC?: boolean;
|
||
datetimeFormatter?: {
|
||
year?: string;
|
||
month?: string;
|
||
day?: string;
|
||
hour?: string;
|
||
minute?: string;
|
||
second?: string;
|
||
};
|
||
};
|
||
group?: {
|
||
groups?: Array<{ title: string; cols: number }>;
|
||
style?: {
|
||
colors?: string | string[];
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
cssClass?: string;
|
||
};
|
||
};
|
||
axisBorder?: {
|
||
show?: boolean;
|
||
color?: string;
|
||
width?: string | number;
|
||
height?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
};
|
||
axisTicks?: {
|
||
show?: boolean;
|
||
borderType?: 'solid' | 'dotted';
|
||
color?: string;
|
||
width?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
};
|
||
tickPlacement?: string;
|
||
tickAmount?: number | 'dataPoints';
|
||
stepSize?: number;
|
||
min?: number;
|
||
max?: number;
|
||
range?: number;
|
||
floating?: boolean;
|
||
position?: string;
|
||
title?: {
|
||
text?: string;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
style?: {
|
||
color?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
fontSize?: string;
|
||
cssClass?: string;
|
||
};
|
||
};
|
||
crosshairs?: {
|
||
show?: boolean;
|
||
width?: number | string;
|
||
position?: string;
|
||
opacity?: number;
|
||
stroke?: { color?: string; width?: number; dashArray?: number; };
|
||
fill?: {
|
||
type?: string;
|
||
color?: string;
|
||
gradient?: {
|
||
colorFrom?: string;
|
||
colorTo?: string;
|
||
stops?: number[];
|
||
opacityFrom?: number;
|
||
opacityTo?: number;
|
||
};
|
||
};
|
||
dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; color?: string | string[]; };
|
||
};
|
||
tooltip?: {
|
||
enabled?: boolean;
|
||
offsetY?: number;
|
||
formatter?(value: string | number, opts?: any): string;
|
||
style?: { fontSize?: string; fontFamily?: string; };
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>xaxis: {
|
||
type: 'category',
|
||
categories: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر'],
|
||
labels: {
|
||
show: true,
|
||
rotate: -45,
|
||
style: {
|
||
fontSize: '12px',
|
||
fontFamily: 'Vazirmatn',
|
||
colors: ['#333']
|
||
}
|
||
},
|
||
title: {
|
||
text: 'ماه',
|
||
style: { fontSize: '14px', fontWeight: 'bold' }
|
||
},
|
||
crosshairs: {
|
||
show: true,
|
||
stroke: { color: '#000', width: 1, dashArray: 0 }
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- yaxis -->
|
||
<h3>۳.۱۷. فیلد <code>yaxis</code> - محور Y</h3>
|
||
<p>تنظیمات محور Y.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>yaxis?: {
|
||
show?: boolean;
|
||
showAlways?: boolean;
|
||
showForNullSeries?: boolean;
|
||
seriesName?: string | string[];
|
||
opposite?: boolean;
|
||
reversed?: boolean;
|
||
logarithmic?: boolean;
|
||
logBase?: number;
|
||
tickAmount?: number;
|
||
stepSize?: number;
|
||
forceNiceScale?: boolean;
|
||
min?: number | ((min: number) => number);
|
||
max?: number | ((max: number) => number);
|
||
floating?: boolean;
|
||
decimalsInFloat?: number;
|
||
labels?: {
|
||
show?: boolean;
|
||
showDuplicates?: boolean;
|
||
minWidth?: number;
|
||
maxWidth?: number;
|
||
style?: {
|
||
colors?: string | string[];
|
||
fontSize?: string;
|
||
fontWeight?: string | number;
|
||
fontFamily?: string;
|
||
cssClass?: string;
|
||
};
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
rotate?: number;
|
||
align?: 'left' | 'center' | 'right';
|
||
padding?: number;
|
||
formatter?(value: number, opts?: any): string | string[];
|
||
};
|
||
axisBorder?: {
|
||
show?: boolean;
|
||
color?: string;
|
||
width?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
};
|
||
axisTicks?: {
|
||
show?: boolean;
|
||
borderType?: 'solid' | 'dotted';
|
||
color?: string;
|
||
width?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
};
|
||
title?: {
|
||
text?: string;
|
||
rotate?: number;
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
style?: {
|
||
color?: string;
|
||
fontFamily?: string;
|
||
fontWeight?: string | number;
|
||
fontSize?: string;
|
||
cssClass?: string;
|
||
};
|
||
};
|
||
crosshairs?: {
|
||
show?: boolean;
|
||
position?: string;
|
||
stroke?: { color?: string; width?: number; dashArray?: number; };
|
||
};
|
||
tooltip?: {
|
||
enabled?: boolean;
|
||
offsetX?: number;
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>yaxis: {
|
||
show: true,
|
||
title: {
|
||
text: 'مبلغ (تومان)',
|
||
style: { fontSize: '14px', fontWeight: 'bold' }
|
||
},
|
||
labels: {
|
||
show: true,
|
||
formatter: (val) => val.toLocaleString('fa-IR'),
|
||
style: { fontSize: '12px', fontFamily: 'Vazirmatn' }
|
||
},
|
||
min: 0,
|
||
max: 100,
|
||
tickAmount: 5
|
||
}</code></pre>
|
||
|
||
<!-- noData -->
|
||
<h3>۳.۱۸. فیلد <code>noData</code> - پیام عدم وجود داده</h3>
|
||
<p>تنظیمات پیام نمایش داده شده در صورت عدم وجود داده.</p>
|
||
|
||
<h4>ساختار:</h4>
|
||
<pre><code>noData?: {
|
||
text?: string;
|
||
align?: 'left' | 'center' | 'right';
|
||
verticalAlign?: 'top' | 'middle' | 'bottom';
|
||
offsetX?: number;
|
||
offsetY?: number;
|
||
style?: {
|
||
color?: string;
|
||
fontSize?: string;
|
||
fontFamily?: string;
|
||
};
|
||
}</code></pre>
|
||
|
||
<h4>مثال کاربردی:</h4>
|
||
<pre><code>noData: {
|
||
text: 'دادهای برای نمایش وجود ندارد',
|
||
align: 'center',
|
||
verticalAlign: 'middle',
|
||
style: {
|
||
color: '#999',
|
||
fontSize: '16px',
|
||
fontFamily: 'Vazirmatn'
|
||
}
|
||
}</code></pre>
|
||
|
||
<!-- Summary -->
|
||
<h2>۴. خلاصه و جمعبندی</h2>
|
||
<p>
|
||
مدل <code>ApexOptions</code> با ۲۵ فیلد اصلی، کنترل کاملی بر تمام جنبههای نمودار ارائه میدهد. با استفاده از این فیلدها میتوانید نمودارهای کاملاً سفارشی و حرفهای ایجاد کنید.
|
||
</p>
|
||
|
||
<div class="info-box">
|
||
<strong>💡 نکته مهم:</strong> برای استفاده بهینه، همیشه از مستندات رسمی ApexCharts (<a href="https://apexcharts.com/docs/options" target="_blank">apexcharts.com/docs/options</a>) استفاده کنید و مقادیر پیشفرض را بررسی کنید.
|
||
</div>
|
||
|
||
<div class="warning-box">
|
||
<strong>⚠️ هشدار:</strong> برخی فیلدها فقط برای انواع خاصی از نمودار کاربرد دارند. قبل از استفاده، مطمئن شوید که فیلد مورد نظر با نوع نمودار شما سازگار است.
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div style="margin-top: 60px; border-top: 1px solid #ddd; padding-top: 20px; text-align: center; color: #777; font-size: 13px;">
|
||
<p>© کلیه حقوق این مستند متعلق به <strong>شرکت فن آوران ساحر علم</strong> میباشد.</p>
|
||
<p>طراحی و توسعه: <strong>هادی خزاعی اصل</strong> | وبسایت: <a href="https://saherelm.ir" style="color: #3498db; text-decoration: none;">https://saherelm.ir</a></p>
|
||
<p>📅 تاریخ تهیه: دوشنبه ۱۱ شهریور ۱۴۰۴</p>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |