Ionic 2 میں انٹرایکٹو چارٹس بنائیں

Sep 11, 2025

کيسے

جب آپ ایک چھوٹی سی ٹیم میں کام کرتے ہیں، تو یہ لوڈ، اتارنا Android، iOS، اور ونڈوز کے لئے علیحدہ کوڈ لکھنے اور برقرار رکھنے کے لئے مشکل ہوتا ہے. یہی ہے کہ ہائبرڈ فریم ورک جیسے آئنک تصویر میں آتے ہیں. وہ نہ صرف ہمیں کوڈ کا ایک ہی ٹکڑا لکھنے کے قابل بناتا ہے جو تین پلیٹ فارم پر استعمال کیا جاسکتا ہے، لیکن مطلب یہ ہے کہ ہم اپنے موجودہ ٹیک اسٹیک کا استعمال کرتے ہوئے کر سکتے ہیں.

اس ٹیوٹوریل میں ہم اس بات کا پتہ چل رہے ہیں کہ کس طرح ایک عام کام کو آئنک 2 میں اعداد و شمار کے نقطہ نظر سے نمٹنے کے لئے، سب سے زیادہ وعدہ ہائبرڈ ایپ فریم ورک میں سے ایک میں سے ایک. میں اس منصوبے کے لئے FusionCharts جاوا اسکرپٹ چارٹ لائبریری (Fusioncharts.com) کا استعمال کروں گا، کیونکہ یہ 90 چارٹ سے زیادہ بڑی لائبریری پیش کرتا ہے، ہر آلہ اور براؤزر کے ساتھ مطابقت رکھتا ہے، اور اس کے ساتھ کام کرنا بہت آسان ہے.

Ionic 2 کی ترتیب

ionic 2 کے ساتھ اطلاقات تیار کرنے کے لئے، آپ کو آپ کے OS پر چل رہا ہے NODE.JS ورژن 4+ اور این پی ایم کی ضرورت ہے. آپ NODE.JS پیکیج سے ڈاؤن لوڈ کرسکتے ہیں nodejs.org/en/download. اور این پی ایم اس کے ساتھ ساتھ نصب کیا جائے گا. اگر آپ کے پاس پہلے سے ہی node.js کے مختلف ورژن ہیں اور ورژن 4 + کے ساتھ ساتھ چلانا چاہتے ہیں، تو آپ اس کے ذریعے کر سکتے ہیں نوڈ ورژن مینیجر .

اگلا آپ کو این پی ایم کا استعمال کرتے ہوئے آئنک 2 بیٹا انسٹال کرنے کی ضرورت ہے. ایسا کرنے کے لئے، چل رہا ہے این پی ایم انسٹال-جی ionic @ بیٹا آپ کے ٹرمینل میں صارف اکاؤنٹ سے جڑ استحکام کے ساتھ (ہم عالمی سطح پر ماڈیول انسٹال کر رہے ہیں). آئنک ایپ کو ضم کرنے کے لئے ہم ایک سے زیادہ پلیٹ فارمز میں تخلیق کر رہے ہیں، ہمیں ایک اور نوڈ ماڈیول کی ضرورت ہے: Cordova. . آپ اس عالمی سطح پر استعمال کر سکتے ہیں این پی ایم انسٹال - گرڈواوا .

اب ہم اپنے پہلے آئنک ایپ تخلیق کرنے کے لئے تیار ہیں. تاہم، اس سیٹ اپ کے ساتھ، ہم صرف ایک براؤزر میں درخواست کو دیکھنے کے قابل ہو جائیں گے. iOS یا لوڈ، اتارنا Android ڈیوائس کے لئے اے پی پی کو ضم کرنے کے لئے، ہمیں اس خاص پلیٹ فارم ماڈیول کوڈووا میں تعمیر کرنے کی ضرورت ہے. اس سبق میں ہم iOS ماڈیول کی تعمیر کریں گے، لہذا آپ کو چلانے کی ضرورت ہے آئنک پلیٹ فارم IOS میں شامل .

آخر میں، آپ کو XCode انسٹال کرنے کی ضرورت ہے. آپ اس کے لئے ہدایات تلاش کریں گے یہاں .

ایک Ionic 2 اے پی پی کی تخلیق

اس ٹیوٹوریل میں، ہم 'چارٹ' نامزد آئنک 2 ایپ تخلیق کرنے جا رہے ہیں. ہم آپ کے موجودہ کام کرنے والی ڈائرکٹری میں ایک 'چارٹس' فولڈر بنائیں گے اور ایک نمونہ درخواست کے ساتھ اپلی کیشن کو بوٹسٹریپ کریں گے. نمونہ ایپ میں ایک بنیادی صفحہ شامل ہوگا، جیسا کہ یہاں بیان کیا گیا ہے.

اس اپلی کیشن کو بنانے کے لئے، چلائیں Ionic شروع چارٹ --v2. موجودہ کام کرنے والی ڈائرکٹری میں ( چارٹس اے پی پی کا نام اور --V2. آئنک کو بتاتا ہے کہ ہم ایک آئنک 2 ایپ تخلیق کرنا چاہتے ہیں). اس کمانڈ پر عملدرآمد پر، اے چارٹس موجودہ کام کرنے والی ڈائرکٹری میں فولڈر کو پیدا کیا جائے گا. براؤزر میں اے پی پی کی جانچ کرنے کے لئے، پر جائیں چارٹس فولڈر اور رن ionic خدمت . یہ آپ کے ڈیفالٹ براؤزر میں اپلی کیشن شروع کرے گا.

نیا صفحہ شامل کرنا

اب ہم ایک صفحہ / اجزاء کو شامل کریں چارٹس درخواست جو جاوا اسکرپٹ چارٹ پیدا کرے گا. سب سے پہلے، ہم صرف 'ہیلو ورلڈ' کے ساتھ ایک سادہ HTML صفحہ شامل کریں گے.

Ionic 2 میں، صفحات کو استعمال کرتے ہوئے آئنک ایپ میں شامل کیا جا سکتا ہے page. ڈیکوریٹر (ایک آئنک ماڈیول کوکولر 2 اجزاء پر مبنی ہے)، جس میں مکمل آئنک فعالیت تک رسائی حاصل ہے. ایک ننگی کم از کم صفحہ ایک ٹیمپلیٹ ایچ ٹی ایم ایل فائل کی ضرورت ہوتی ہے (جس میں مارک اپ شامل ہے)، اور جاوا اسکرپٹ فائل (منطق کی ضرورت پر مشتمل ہے). آپ آئنک صفحات کے بارے میں مزید تفصیلات تلاش کرسکتے ہیں یہاں .

اس صفحے کو تخلیق کرنے کے لئے ہم شامل کریں گے ڈونٹ چارٹ اور ڈونٹ-چارٹ. html. فائلوں کو چارٹ / اے پی پی / صفحات ڈونٹ چارٹ ڈائرکٹری. HTML فائل میں، ہم ایپ نیویگیشن اور ایک سادہ 'ہیلو ورلڈ' کی سرخی کے لئے کوڈ شامل کر سکتے ہیں:

 & lt؛ ion-navbar * navbar & gt؛
& lt؛ بٹن menutoggle & gt؛
  & lt؛ آئن آئکن نام = "مینو" اور جی ٹی؛ & lt؛ / آئن آئکن اور جی ٹی؛
& lt؛ / بٹن اور جی ٹی؛
& lt؛ آئن عنوان اور GT؛ ہیلو آئنک اور ایل ٹی؛ / آئن عنوان اور جی ٹی؛
& lt؛ / ion-navbar & gt؛

& lt؛ آئن مواد اور جی ٹی؛
  & lt؛ h1 & gt؛ ہیلو ورلڈ اور ایل ٹی؛ / ڈی وی اور جی ٹی؛
& lt؛ / آئن مواد اور جی ٹی؛

جاوا اسکرپٹ فائل میں، ہم اس اجزاء کے لئے ٹیمپلیٹ کے طور پر پیدا HTML فائل کا حوالہ دیتے ہیں. چونکہ ہم ابھی تک کچھ بھی نہیں کر رہے ہیں، ہم صرف ایک خالی تعمیر کا اضافہ کرسکتے ہیں چارٹ اسپیس .

 درآمد {صفحہ} 'آئنک کوکولر' سے؛

page ({{
  Templatorll: 'تعمیر / صفحات / پائی چارٹ / پائی-چارٹ. html'
})

برآمد کلاس چارٹ اسپیس {
  تعمیر () {
  }
}

ہم نے صرف ایک اسٹائل جزو بنایا ہے؛ اب ہمیں اس اہم ایپ میں اس سے منسلک کرنے کی ضرورت ہے. ایسا کرنے کے لئے ہمیں ہم نے اس جزو کا حوالہ دینے کی ضرورت ہے جو ہم نے پیدا کیا ہے App.js. اپلی کیشن فولڈر میں فائل، اور اس میں جزو کا استعمال کریں صفحات اپلی کیشن اجزاء کی تعمیر کی جائیداد.

 درآمد {چارٹ اسپیس} './pages/donut-chart/donut-chart' سے درآمد کریں.

تعمیر (اے پی پی، پلیٹ فارم، مینو) {
    // ڈیفالٹ ایپ تعمیراتی
    یہ .app = ایپ؛
    یہ.Platform = پلیٹ فارم؛
    یہ.menu = مینو؛
    یہ.initializeapp ()؛
    // ہمارے ایپ کے صفحات مقرر کریں - ہم یہاں ڈونٹ چارٹ شامل کر رہے ہیں
    یہ. پیج = [
      {عنوان: 'استقبال'، اجزاء: helloionicpage}،
      {عنوان: 'ڈونٹ چارٹ'، اجزاء: چارٹپس}
    ]؛

    // helloionicpage جڑ (یا سب سے پہلے) صفحہ - پہلے سے طے شدہ قدم
    یہ .rooTpage = havelionicpage؛
}

ان تبدیلیوں کے بعد، براؤزر میں آئنک اپلی کیشن آٹو دوبارہ لوڈ کرنا چاہئے (یا پھر ٹرمینل سے آئنک کی خدمت کا استعمال کریں). اب اے پی پی کے سائڈ مینو میں ایک نیا لنک نظر آنا چاہئے، اور کلک کرنے پر آپ کو اسکرین پر لکھا 'ہیلو ورلڈ' دیکھنا چاہئے.

جاوا اسکرپٹ چارٹ بنانا

اب ڈونٹ چارٹ بنانے کے لئے ہمارے 'ہیلو ورلڈ' کے صفحے کو ترمیم کرنے کا وقت ہے. Fusioncharts لائبریری کا استعمال کرنے کے قابل ہونے کے لئے، ہمیں سب سے پہلے میں شامل کرنے کی ضرورت ہے Fusioncharts.js. اور fusioncharts.charts.js. میں فائلیں www / index.html. فائل.

فوری ٹپ: اگر دونوں فائلیں اسی فولڈر میں ہیں تو پھر شامل کریں Fusioncharts.js. کافی ہو جائے گا، کیونکہ یہ خود کار طریقے سے شامل ہوں گے fusioncharts.charts.js. .

 & lt؛ سکرپٹ کی قسم = "متن / جاوا اسکرپٹ" SRC = "PATH / TO / FUNIOGARCHARTS.JS" & GT؛ & lt؛ / script & gt؛

ہم اب ایک چارٹ کنٹینر بنانے کے لئے پچھلے مرحلے سے ایچ ٹی ایم ایل میں ترمیم کریں گے:

 & lt؛ div id = "چارٹ کنٹینر" اور GT؛ & lt؛ / div & gt؛

تعمیر میں میں ڈونٹ چارٹ جس نے ہم نے اوپر پیدا کیا، ہمیں چارٹ کنٹینر کے اندر چارٹ بنانے کے لئے مندرجہ ذیل کوڈ کو شامل کرنے کی ضرورت ہے:

 Fusioncharts.ready (فنکشن () {
  Var Revenuechart = نیا فیوژنچارٹس ({
    قسم: 'doughnut2d'،
    رینجریٹ: 'چارٹ کنٹینر'،
    چوڑائی: '100٪'،
    اونچائی: '450'،
    ڈیٹا فارمیٹ: 'JSON'،
    ڈیٹا کا ذریعہ: {
      "چارٹ": {
        "کیپشن": "مصنوعات کی اقسام کی طرف سے آمدنی کی تقسیم"،
        "subcaption": "گزشتہ سال"،
        "نمبر" ":" $ "،
        "Palettecolors": "# 0075C2، # 1AAF5D، # F2C500، # F45B00، # 8E0000"،
        // زیادہ چارٹ کی صفات
      }،
      "ڈیٹا": [{
          "لیبل": "کھانے"،
          "ویلیو": "28504"
        } // مزید ڈیٹا
      نس]
    }
  }). رینڈر ()؛
})؛

اس کوڈ میں ہم FusionCharts کے تعمیر کے ذریعے ایک نیا چارٹ بنا رہے ہیں. استعمال کیا جاتا خصوصیات مختصر طور پر ذیل میں وضاحت کی جاتی ہیں:

قسم چارٹ کی قسم کی وضاحت کرتا ہے

rendrat. کنٹینر کی شناخت ہے جہاں ہم چارٹ فراہم کرنا چاہتے ہیں

چوڑائی اور اونچائی چارٹ طول و عرض مقرر کرنے کے لئے استعمال کیا جاتا ہے

ڈیٹا فارمیٹ کیا شکل ہے جس میں ہم چارٹ ڈیٹا کو کھانا کھلانا چاہتے ہیں (آپ JSON کے ساتھ ساتھ XML استعمال کر سکتے ہیں)

ڈیٹا کا ذریعہ فیوژنچارٹس کے اندر چارٹ کاسمیٹکس پر مشتمل ہے چارٹ آبجیکٹ اور اصل اعداد و شمار کے اندر اندر پلاٹ کرنے کے لئے ڈیٹا صف

اگرچہ میں نے صرف چار صفات دکھایا ہے چارٹ اعتراض، ایک سو سے زائد سے زائد ہیں آپ اپنے چارٹ کے ڈیزائن کو بہتر بنانے کے لئے استعمال کرسکتے ہیں. آپ اس کے بارے میں مزید پڑھ سکتے ہیں یہاں .

ایک بار یہ کوڈ شامل ہے، چلائیں ionic خدمت اے پی پی کو دور کرنے کے لئے. آپ کو آپ کے سائیڈ مینو میں 'ڈونٹ چارٹ' کا لنک دیکھنا چاہئے. اگر آپ میرے تمام اقدامات کو مناسب طریقے سے پیروی کرتے ہیں تو، جب آپ اس لنک پر کلک کریں تو آپ کو ڈونٹ چارٹ دیکھنا چاہئے! اگر نہیں، تو براہ مہربانی کوڈ پر حوالہ دیں اس منصوبے کے لئے GitHub Repo یہ دیکھنے کے لئے کہ آپ غلط کہاں گئے تھے.

نوٹ: براؤزر میں اس کی جانچ پڑتال کے بعد، استعمال کریں Ionic emult iOS iOS سمیلیٹر میں اپنا ایپ لوڈ کرنے کے لئے.

خلاصہ

Our doughnut chart representing the revenue split of a hypothetical company by product categories — ہماری ڈونٹ چارٹ مصنوعات کی اقسام کی طرف سے ایک نظریاتی کمپنی کی آمدنی کی تقسیم کی نمائندگی کرتا ہے

جیسا کہ آپ نے ابھی دیکھا ہے، Ionic میں اعداد و شمار کے نقطہ نظر کے ساتھ شروع کرنا مشکل نہیں ہے 2. اگرچہ میں نے اس عمل کا مظاہرہ کرنے کے لئے صرف ایک سادہ ڈونٹ چارٹ بنایا ہے، یہ ممکن ہے کہ اسی عمل کا استعمال کرتے ہوئے ایک سے زیادہ ڈیٹا بیس کے ساتھ پیچیدہ چارٹ تخلیق کریں. . صرف ایک چیز جس کو آپ کو معلوم کرنے کی ضرورت ہے وہ شکل ہے جس میں فیوژنچارٹس اس مخصوص چارٹ کی قسم کے لئے ڈیٹا کو قبول کرتی ہیں. ایک بار جب آپ ایسا کرنے کے قابل ہو تو، آپ لائبریری سے کسی بھی چارٹ کو بنانے کے قابل ہو جائیں گے.

اگر آپ کو اس موضوع کے ساتھ کسی بھی مدد کی ضرورت ہوتی ہے یا اگر آپ کو اس ٹیوٹوریل کے مواد کے بارے میں کوئی سوال ہے تو، مجھے پکڑنے کے لئے آزاد محسوس کریں ٹویٹر پر .میں ہمیشہ مدد کرنے میں خوش ہوں!

یہ مضمون اصل میں شائع ہوا نیٹ میگزین مسئلہ 283؛ اسے خریدیں .

Ionic 2 میں انٹرایکٹو چارٹس بنائیں

Ionic 2 کی ترتیب

ایک Ionic 2 اے پی پی کی تخلیق

نیا صفحہ شامل کرنا

جاوا اسکرپٹ چارٹ بنانا

خلاصہ

کيسے - انتہائی مشہور مضامین

ردعمل سائٹس اور اطلاقات کی جانچ کیسے کریں

میڈیا سوالات کے بغیر انکولی ترتیب تعمیر کریں

VR میں زندگی میں 2D کردار کیسے لانا

متحرک ٹائپنگ اثر کیسے بنانا

تمام ای میل کلائنٹس میں کامل پیغامات بنائیں

فوٹوشاپ میں ایک سنیپچیٹ جیفیلٹر کیسے بنائیں

3D میں جلد کی شیڈنگ کیسے ماسٹر

SVG gradients کے ساتھ D3.js چارٹ بڑھانے

اقسام