چارٹ عنصر

چارٹ کی اقسام

chartType کی خاصیت بصری طرز کا تعین کرتی ہے:

• bar: عمودی یا افقی بار چارٹ
• line: لائن چارٹ جس میں ہموار کرنے کا اختیار ہو
• area: ایریا چارٹ جس میں بھرے ہوئے علاقے ہوں
• scatter: اسکیٹر پلاٹ جس میں ڈیٹا پوائنٹس ہوں
• pie: پائی چارٹ جو تناسب دکھاتا ہے
• doughnut: ڈونٹ چارٹ (پائی چارٹ جس میں مرکز کا سوراخ ہو)
• radar: ریڈار/اسپائیڈر چارٹ

ڈیٹا کی ساخت

dataSet ڈیٹا آبجیکٹس کا ایک صف ہے، جہاں ہر آبجیکٹ میں شامل ہے:

• dataTime: وقت کا نقطہ جو ChartNode کے مطابق ہے (سیکنڈز میں)
• dataPoints: ایک صف ڈیٹا پوائنٹس کی جو اس وقت دکھائی جائیں گی

dataPoints میں ہر ڈیٹا پوائنٹ میں شامل ہے:

• id: ڈیٹا پوائنٹ کے لیے منفرد شناخت کنندہ
• label: ڈیٹا پوائنٹ کا لیبل/نام
• value: عددی قیمت
• color (اختیاری): اس ڈیٹا پوائنٹ کے لیے حسب خواہش رنگ ہیکس شکل میں

لیبل اسٹائلنگ

labelStyle آبجیکٹ چارٹ لیبلز کی شکل و صورت کو کنٹرول کرتا ہے:

• فونٹ کی خصوصیات: fill، fontSize، fontFamily، fontWeight
• اسٹروک کی خصوصیات: stroke، strokeThickness
• سایہ کی خصوصیات: dropShadow، dropShadowColor، dropShadowBlur، dropShadowDistance، dropShadowAngle، dropShadowAlpha

لائن اور ایریا چارٹ کی خصوصیات

لائن اور ایریا چارٹس کے لیے، آپ درج ذیل ترتیب دے سکتے ہیں:

• linePointStyle: ڈیٹا پوائنٹس کو بھرے ہوئے دائرے یا خالی دائرے کے طور پر دکھائیں
• lineSmooth: سیدھی لائنوں کے بجائے ہموار منحنی خطوط کی اجازت دیں
• lineAreaAlpha: بھرے ہوئے علاقے کی شفافیت کنٹرول کریں (ایریا چارٹس کے لیے)

بار چارٹ کی خصوصیات

بار چارٹس کے لیے، آپ درج ذیل ترتیب دے سکتے ہیں:

• barOrientation: بارز کو عمودی یا افقی دکھائیں
• barCornerRadius: بارز کے کونوں کو گول کریں
• showBarBackground: بارز کے پیچھے پس منظر دکھائیں
• barBackgroundColor/barBackgroundAlpha: بار کے پس منظر کی شکل و صورت

لیجنڈ کی ترتیب

چارٹ کے لیجنڈ کو فعال کریں اور حسب ضرورت ترتیب دیں:

• showLegend: لیجنڈ کی مرئییت کو تبدیل کریں
• legendPosition: لیجنڈ کی جگہ (فی الحال "نیچے" کی حمایت کرتا ہے)
• legendItemSize: لیجنڈ رنگ کے اشارے کا سائز
• legendGap: لیجنڈ آئٹمز کے درمیان فاصلہ

{
"id": "chart-element-id",
"type": "Chart",
"start": 0,
"duration": 10,
"trackIndex": 0,
"x": 100,
"y": 100,
"chartType": "bar",
"chartWidth": 800,
"chartHeight": 600,
"bgColor": "#ffffff",
"bgAlpha": 1,
"showAxis": true,
"axisColor": "#000000",
"axisWidth": 2,
"showGrid": true,
"gridColor": "#cccccc",
"gridAlpha": 0.5,
"showLabels": true,
"labelStyle": {
  "fill": "#333333",
  "fontSize": 12,
  "fontFamily": "Arial",
  "fontWeight": "normal",
  "stroke": "#000000",
  "strokeThickness": 0,
  "dropShadow": false,
  "dropShadowColor": "#000000",
  "dropShadowBlur": 4,
  "dropShadowDistance": 3,
  "dropShadowAngle": 1.2,
  "dropShadowAlpha": 1
},
"showLegend": true,
"legendPosition": "bottom",
"legendItemSize": 14,
"legendGap": 8,
"barOrientation": "vertical",
"barCornerRadius": 4,
"showBarBackground": false,
"barBackgroundColor": "#eeeeee",
"barBackgroundAlpha": 0.4,
"dataSet": [
  {
    "dataTime": 0,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 10, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 20, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 15, "color": "#ffce56" }
    ]
  },
  {
    "dataTime": 5,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 25, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 18, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 22, "color": "#ffce56" }
    ]
  }
]
}