📅 تاریخ تهیه: دوشنبه ۱۱ شهریور ۱۴۰۴
+📌 موضوع: بررسی تفصیلی فیلدهای ApexOptions
+
+ مدل ApexOptions قلب تپنده کتابخانه ApexCharts است و تمام تنظیمات نمودار را در بر میگیرد. این مدل شامل ۲۵ فیلد اصلی است که هر کدام بخش خاصی از نمودار را کنترل میکنند. در این سند، هر فیلد به همراه زیرفیلدها، توضیحات و مثالهای کاربردی بررسی شده است.
+
| ردیف | +نام فیلد | +توضیح | +
|---|---|---|
| ۱ | annotations | حاشیهنویسیها (خطوط، نقاط، متنها) |
| ۲ | chart | تنظیمات اصلی نمودار (نوع، ابعاد، انیمیشن) |
| ۳ | colors | رنگهای سریهای داده |
| ۴ | dataLabels | برچسبهای داده روی نقاط |
| ۵ | drilldown | ناوبری عمیق (Drilldown) |
| ۶ | fill | پرکننده (رنگ، گرادیانت، الگو) |
| ۷ | forecastDataPoints | نقاط داده پیشبینی |
| ۸ | grid | شبکهبندی نمودار |
| ۹ | labels | برچسبهای نمودار |
| ۱۰ | legend | راهنمای نمودار |
| ۱۱ | markers | نشانگرهای نقاط |
| ۱۲ | noData | پیام عدم وجود داده |
| ۱۳ | plugins | افزونهها (Weave) |
| ۱۴ | plotOptions | گزینههای خاص هر نوع نمودار |
| ۱۵ | responsive | تنظیمات واکنشگرا |
| ۱۶ | series | سریهای داده |
| ۱۷ | states | حالتهای مختلف (hover, active) |
| ۱۸ | stroke | خطوط نمودار |
| ۱۹ | subtitle | زیرعنوان |
| ۲۰ | theme | تم (روشن/تاریک) |
| ۲۱ | title | عنوان نمودار |
| ۲۲ | tooltip | Tooltip (راهنمای شناور) |
| ۲۳ | xaxis | محور X |
| ۲۴ | yaxis | محور Y |
annotations - حاشیهنویسیهااین فیلد برای اضافه کردن حاشیهنویسیهای سفارشی (خطوط، نقاط، متنها) به نمودار استفاده میشود.
+ +xaxis: حاشیهنویسیهای محور X (خطوط عمودی)yaxis: حاشیهنویسیهای محور Y (خطوط افقی)points: حاشیهنویسیهای نقطهایtexts: متنهای سفارشیimages: تصاویر سفارشی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; };
+ };
+ };
+ }
+]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: 'نقطه مهم' }
+ }]
+}chart - تنظیمات اصلی نموداراین فیلد مهمترین بخش تنظیمات است و رفتار کلی نمودار را کنترل میکند.
+ +width: عرض نمودار (عدد یا درصد)height: ارتفاع نمودار (عدد یا درصد)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: رنگ متن پیشزمینهfontFamily: فونت متنbackground: رنگ پسزمینهanimations: تنظیمات انیمیشنevents: رویدادهای نمودارtoolbar: نوار ابزارzoom: تنظیمات زومselection: تنظیمات انتخابstacked: نمودار پشتهایstackType: نوع پشته (normal, 100%)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; };
+}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('نقطه انتخاب شد'); }
+ }
+}colors - رنگهای سریهای دادهآرایهای از رنگها برای سریهای داده. هر سری با یک رنگ متفاوت نمایش داده میشود.
+ +colors?: Array<string | ((opts: {
+ value: number;
+ seriesIndex: number;
+ dataPointIndex: number;
+ w: any;
+}) => string)>// رنگهای ثابت
+colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']
+
+// رنگهای داینامیک بر اساس مقدار
+colors: [
+ function({ value, seriesIndex, dataPointIndex }) {
+ return value > 50 ? '#00E396' : '#FF4560';
+ }
+]dataLabels - برچسبهای دادهبرچسبهایی که روی نقاط داده نمایش داده میشوند.
+ +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[]; };
+}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
+ }
+}fill - پرکنندهتنظیمات پرکننده (رنگ، گرادیانت، الگو، تصویر).
+ +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;
+ };
+}fill: {
+ type: 'gradient',
+ gradient: {
+ shade: 'light',
+ type: 'vertical',
+ shadeIntensity: 0.5,
+ gradientToColors: ['#008FFB', '#00E396'],
+ opacityFrom: 1,
+ opacityTo: 0.5,
+ stops: [0, 50, 100]
+ }
+}grid - شبکهبندیتنظیمات شبکهبندی نمودار.
+ +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; };
+}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 }
+}legend - راهنمای نمودارتنظیمات راهنمای نمودار (Legend).
+ +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; };
+}legend: {
+ show: true,
+ position: 'top',
+ horizontalAlign: 'center',
+ fontSize: '14px',
+ fontFamily: 'Vazirmatn',
+ markers: { width: 12, height: 12, radius: 6 },
+ onItemClick: { toggleDataSeries: true },
+ onItemHover: { highlightDataSeries: true }
+}markers - نشانگرهاتنظیمات نشانگرهای نقاط داده.
+ +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;
+}markers: {
+ size: 6,
+ colors: ['#008FFB'],
+ strokeColors: '#fff',
+ strokeWidth: 2,
+ hover: { size: 8, sizeOffset: 3 },
+ discrete: [{
+ seriesIndex: 0,
+ dataPointIndex: 3,
+ fillColor: '#FF0000',
+ size: 10
+ }]
+}plotOptions - گزینههای خاص هر نوع نموداراین فیلد تنظیمات خاص هر نوع نمودار را شامل میشود.
+ +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; };
+ };
+}plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '70%',
+ borderRadius: 4,
+ borderRadiusApplication: 'end',
+ distributed: false,
+ dataLabels: {
+ position: 'top',
+ maxItems: 100,
+ hideOverflowingLabels: true
+ }
+ }
+}plotOptions: {
+ pie: {
+ startAngle: 0,
+ endAngle: 360,
+ expandOnClick: true,
+ expandOffset: 10,
+ dataLabels: { offset: 0 }
+ }
+}responsive - تنظیمات واکنشگراتنظیمات واکنشگرا برای اندازههای مختلف صفحه.
+ +responsive?: Array<{
+ breakpoint?: number;
+ options?: ApexOptions;
+}>responsive: [
+ {
+ breakpoint: 480,
+ options: {
+ chart: { width: '100%', height: 250 },
+ legend: { position: 'bottom' }
+ }
+ },
+ {
+ breakpoint: 768,
+ options: {
+ chart: { width: '100%', height: 300 },
+ legend: { position: 'bottom' }
+ }
+ }
+]states - حالتهای مختلفتنظیمات حالتهای مختلف (hover, active).
+ +states?: {
+ hover?: {
+ filter?: {
+ type?: 'none' | 'lighten' | 'darken';
+ value?: number;
+ };
+ };
+ active?: {
+ allowMultipleDataPointsSelection?: boolean;
+ filter?: {
+ type?: 'none' | 'lighten' | 'darken';
+ value?: number;
+ };
+ };
+}states: {
+ hover: {
+ filter: { type: 'darken', value: 0.15 }
+ },
+ active: {
+ allowMultipleDataPointsSelection: false,
+ filter: { type: 'darken', value: 0.35 }
+ }
+}stroke - خطوط نمودارتنظیمات خطوط نمودار.
+ +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[];
+}stroke: {
+ show: true,
+ curve: 'smooth',
+ lineCap: 'round',
+ colors: ['#008FFB'],
+ width: 3,
+ dashArray: 0
+}theme - تمتنظیمات تم (روشن/تاریک).
+ +theme?: {
+ mode?: 'light' | 'dark' | '';
+ palette?: string;
+ monochrome?: {
+ enabled?: boolean;
+ color?: string;
+ shadeTo?: 'light' | 'dark';
+ shadeIntensity?: number;
+ };
+}theme: {
+ mode: 'light',
+ palette: 'palette1',
+ monochrome: {
+ enabled: false,
+ color: '#008FFB',
+ shadeTo: 'light',
+ shadeIntensity: 0.65
+ }
+}title و subtitle - عنوان و زیرعنوانتنظیمات عنوان و زیرعنوان نمودار.
+ +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;
+ };
+}title: {
+ text: 'نمودار فروش ماهانه',
+ align: 'center',
+ margin: 10,
+ style: {
+ fontSize: '18px',
+ fontFamily: 'Vazirmatn',
+ fontWeight: 'bold',
+ color: '#333'
+ }
+},
+subtitle: {
+ text: 'آمار فروش سال ۱۴۰۳',
+ align: 'center',
+ style: {
+ fontSize: '14px',
+ color: '#666'
+ }
+}tooltip - Tooltipتنظیمات Tooltip (راهنمای شناور).
+ +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;
+ };
+}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 }
+}xaxis - محور Xتنظیمات محور X.
+ +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; };
+ };
+}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 }
+ }
+}yaxis - محور Yتنظیمات محور Y.
+ +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;
+ };
+}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
+}noData - پیام عدم وجود دادهتنظیمات پیام نمایش داده شده در صورت عدم وجود داده.
+ +noData?: {
+ text?: string;
+ align?: 'left' | 'center' | 'right';
+ verticalAlign?: 'top' | 'middle' | 'bottom';
+ offsetX?: number;
+ offsetY?: number;
+ style?: {
+ color?: string;
+ fontSize?: string;
+ fontFamily?: string;
+ };
+}noData: {
+ text: 'دادهای برای نمایش وجود ندارد',
+ align: 'center',
+ verticalAlign: 'middle',
+ style: {
+ color: '#999',
+ fontSize: '16px',
+ fontFamily: 'Vazirmatn'
+ }
+}
+ مدل ApexOptions با ۲۵ فیلد اصلی، کنترل کاملی بر تمام جنبههای نمودار ارائه میدهد. با استفاده از این فیلدها میتوانید نمودارهای کاملاً سفارشی و حرفهای ایجاد کنید.
+
© کلیه حقوق این مستند متعلق به شرکت فن آوران ساحر علم میباشد.
+طراحی و توسعه: هادی خزاعی اصل | وبسایت: https://saherelm.ir
+📅 تاریخ تهیه: دوشنبه ۱۱ شهریور ۱۴۰۴
+