المخطط العمودي

المخطط العمودي displays categorical comparisons and analytical panels using vertical bars in a variety of chart layout types مع دعم RTL.

Loading demo: column-chart-real-world

التثبيت

npx sdaia-ui@latest add column-chart

import { ColumnChart } from "@/components/ui/column-chart"

<ColumnChart type="insight" />

مخطط أعمدة لتصوير الرؤى البيانية الرئيسية.

Loading demo: column-chart-insight

مخطط أعمدة يعرض قيم الأداء أو النتيجة.

Loading demo: column-chart-score

مخطط أعمدة على شكل مصفوفة لمقارنة الاتجاهات عبر أبعاد متعددة.

Loading demo: column-chart-trend-matrix

تخطيط شبكي من مخططات الأعمدة لبيانات متعددة الأبعاد.

Loading demo: column-chart-insight-grid

مخطط أعمدة بنمط المقياس لإظهار التقدم نحو هدف.

Loading demo: column-chart-gauge

خصائص مكوّن ColumnChart.

Prop	Type	Default	Required
type	'Insight' \| 'Score' \| 'TrendMatrix' \| 'ValuePanel' \| 'InsightGrid' \| 'GaugeChart' \| 'PulseBox' \| 'MetricCell' \| 'DataCluster' \| 'ProgressMeter' \| 'Forecast' \| 'ScorePod' \| 'IndexTile'	'Insight'	optional
dir	'ltr' \| 'rtl'	-	optional
title	string	-	optional
note	string	-	optional
dateBadge	string	-	optional
label	string	-	optional
value	string	'422.61'	optional
badge	{ type?: 'increase' \| 'decrease'; value?: string }	-	optional
label2	string	-	optional
value2	string	'422.61'	optional
badge2	{ type?: 'increase' \| 'decrease'; value?: string }	-	optional
data	ColumnChartDataPoint[]	-	optional
data2	ColumnChartDataPoint[]	-	optional
maxValue	number	250	optional
xLabels	string[]	-	optional
yLabels	string[]	['250','200','150','100','50','0']	optional
tabs	ColumnChartTab[]	-	optional
defaultTab	string	-	optional
onTabChange	(value: string) => void	-	optional
legend	ColumnChartLegendItem[]	-	optional
metrics	ColumnChartMetric[]	-	optional
onActionClick	() => void	-	optional
actionLabel	string	-	optional