Files
xSaherelmWorkspace/Documents/Markdown/AppexChartOptionsDocumentation.html
T
2026-09-01 22:26:02 +03:30

1504 lines
46 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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&lt;{
icon?: string;
title?: string;
index?: number;
class?: string;
click?(chart: ApexCharts, options?: any, e?: MouseEvent): void;
}&gt;;
};
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&lt;{ name?: string; options?: any; }&gt;;
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: '&lt;svg&gt;...&lt;/svg&gt;',
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&lt;string | ((opts: {
value: number;
seriesIndex: number;
dataPointIndex: number;
w: any;
}) => string)&gt;</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&lt;{ offset: number; color: string; opacity: number; }&gt; | Array&lt;Array&lt;{ offset: number; color: string; opacity: number; }&gt;&gt;;
};
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&lt;{
seriesIndex?: number;
dataPointIndex?: number;
fillColor?: string;
strokeColor?: string;
size?: number;
}&gt;;
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&lt;{ from?: number; to?: number; color?: string; }&gt;;
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&lt;{ from?: number; to?: number; color?: string; foreColor?: string; name?: string; }&gt;;
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&lt;{ from?: number; to?: number; color?: string; foreColor?: string; name?: string; }&gt;;
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&lt;{
breakpoint?: number;
options?: ApexOptions;
}&gt;</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&lt;(opts: {
series: number[][];
seriesIndex: number;
dataPointIndex: number;
y1?: number;
y2?: number;
w: any;
}) => string&gt;;
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&lt;{
title?: { title?: string; formatter?(seriesName: string, opts?: any): string; };
formatter?(value: number, opts?: any): string;
}&gt;;
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&lt;string | number&gt; | Array&lt;Array&lt;string | number&gt;&gt;;
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&lt;{ title: string; cols: number }&gt;;
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>