টাইটানিয়াম অ্যাপসিলারেটরের সাথে চার্ট প্রদর্শন করা হচ্ছে

আপনি অ্যাপিলিটার বাজারে যে ti.charts মডিউলটি পেতে পারেন তা কেবলমাত্র আইওএসের জন্য। আমি একটি হালকা ওজনের সমাধান চাইছিলাম যা অ্যান্ড্রয়েড এবং আইওএস উভয় ক্ষেত্রেই কার্যকর হতে পারে এবং চার্ট, বার, লাইন, পাই ইত্যাদির সর্বাধিক সাধারণ সরবরাহ করতে পারে এটির সবচেয়ে সহজ উপায়টি ছিল আমার জন্য ওয়েব ভিউয়ের মধ্যে একটি চার্টিং জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করা।

আমার যোগ্যতা:

1. দ্রুত
2. কোন jQuery নির্ভরতা নেই
3. প্রাথমিক অঙ্কনে অ্যানিমেশন
4. ভাল ডিফল্ট স্টাইলিং

এখন অনেকগুলি জাভাস্ক্রিপ্ট চার্টিং লাইব্রেরি রয়েছে তবে উপরের সমস্ত যোগ্যতার সাথে মেলে এমন পুরোটা নয়। একটি অমিত পরিমাণ jQuery উপর নির্ভর করে। আমি জ্যাকুয়ারির উপর নির্ভরশীল এমন কয়েকটি সাথে ঘুরেফিরে এসেছি এবং যখন খুব বেশি ডেটা পয়েন্ট পাওয়া যায় তখন এগুলি সাধারণত ধীরে ধীরে রেন্ডার হয় এবং অনেকগুলি বলতে গেলে আমি পুরোটা বোঝায় না। ওয়েব ভিউ হ'ল অন্যতম ব্যবহারযোগ্য সংস্থানীয় উপাদান যা আপনি ব্যবহার করতে পারেন তাই জিনিসগুলি সহজ রাখতে যত বেশি কাজ করা যায় তত ভাল।

আমি অনুসন্ধানের সপ্তাহের পরের দিন আমি একটি নতুন গ্রন্থাগার জুড়ে হোঁচট খেয়েছিলাম যা আমার যা ইচ্ছা তা ঠিক করে দেয়। ChartJS। কাস্টম ডেটা পয়েন্টগুলি পাশ করার সময়, ওয়েবভিউতে কোনও চার্ট কীভাবে প্রয়োগ করা যায় তা এখানে রয়েছে।

স্বয়ংক্রিয়ভাবে উত্পন্ন ফাইলগুলি বাদে এই প্রকল্পে 3 টি ফাইল রয়েছে
app.js
উৎস / chart.html
উত্স / চার্ট.ইউভিজেস - এই ফাইলটিতে এখানে অবস্থিত Chart.js এর জাভাস্ক্রিপ্ট রয়েছে

app.js var win = Titanium.UI.createWindow ({ব্যাকগ্রাউন্ড কালার : '# fff'}); var চার্টভিউ = Ti.UI.createWebView ({উচ্চতা: 200, প্রস্থ: 320, বাম: 0, শীর্ষ: 0, শোস্ক্রোলবারগুলি: মিথ্যা, স্পর্শ সক্ষম: মিথ্যা, url: '/source/chart.html';); win.add (chartView); var বোতাম = Ti.UI.createButton ({শিরোনাম: 'পুনর্জাগরণ', শীর্ষ: 220, }); win.add (বোতাম); বাটন.এডএডএভিটলাইজনার ('ক্লিক', ফাংশন () {var অপশন = {}; অপশনস.ডাটা = নতুন অ্যারে (ম্যাথ.ফ্লুর (ম্যাথ.র্যান্ডম () * 1001), ম্যাথ.ফ্লুর (ম্যাথ.র্যান্ডম () * 1001), ম্যাথ.ফ্লুর (ম্যাথ.র্যান্ডম () * 1001), ম্যাথ.ফ্লুর (ম্যাথআরেন্ডম () * 1001), ম্যাথ.ফ্লুর (ম্যাথ.র্যান্ডম () * 1001)); টি.আই.পি.ফায়ারএভেন্ট ('রেন্ডারচার্ট'), বিকল্পসমূহ);}); win.open ();

আমরা আমাদের উইন্ডো, ওয়েব ভিউ এবং নতুন ডেটা সহ গ্রাফটি পুনরায় আঁকতে একটি বোতাম তৈরি করে শুরু করি। বোতামটি ক্লিক করা হলে, আমরা বিকল্প হিসাবে পরিচিত একটি বস্তু তৈরি করি। 1 এবং 1000 এর মধ্যে 5 টি এলোমেলো সংখ্যা তৈরি করা হয় এবং বিকল্পগুলি ডেটায় অ্যারে নির্ধারিত হয়।

টিআইএপ.ফায়ারএভেন্টকে তারপরে 2 টি আর্গুমেন্ট দিয়ে ডাকা হয়। রেন্ডারচার্টটি 1 ম আইটেমটি পাস হয়েছে এবং এর অর্থ হল আমাদের কোডে কোথাও কোথাও আমাদের একই নামটির সাথে সংশ্লিষ্ট ইভেন্ট শ্রোতা থাকা দরকার। দ্বিতীয় আইটেমটি অপশন অবজেক্ট। এখন, আপনি নিজেকে জিজ্ঞাসা করতে পারেন যে আমি কেন সরাসরি অ্যারে পাস করিনি …… এটি কাজ করবে না, কোনও বস্তু প্রত্যাশিত। বস্তুর সাথে অ্যারে সংযুক্ত করে আমরা সেই ডেটা ইভেন্ট শ্রোতার কাছে প্রেরণ করতে পারি যা আমাদের এইচটিএমএল ফাইলের মধ্যে থাকবে।

ওয়েবভিউ নিজেই টাইটানিয়ামের সাথে যোগাযোগের জন্য, ইভেন্ট হ্যান্ডলারগুলি এর মতো ব্যবহার করা প্রয়োজনীয়। যোগাযোগের একটি লাইন খোলার জন্য টাইটানিয়াম এবং ওয়েবভিউয়ের একটি উপায় প্রয়োজন এবং এটি ঠিক এটি করে।

মতামত / chart.html

আমাদের চার্টিং লাইব্রেরির ডিফল্ট ফাইল এক্সটেনশন .js। আমি খুঁজে পেয়েছি যে .js এক্সটেনশনটি ব্যবহার করার সময় টাইটানিয়ামের সাথে দ্বন্দ্ব থাকতে পারে, তাই নিশ্চিত হয়ে নিন যে আপনি আপনার জাভাস্ক্রিপ্ট ফাইলগুলির নাম পরিবর্তন করেছেন যা ওয়েবভিউ থেকে ডাকা হচ্ছে। আমার পছন্দটি .wvjs, তবে আপনি যা কিছু ব্যবহার করতে পারেন তা সত্যিই।

আপনি দেখতে পাবেন আমাদের রেন্ডারচার্টের ইভেন্টলাইজনারের মধ্যে আমাদের চার্টিং জাভাস্ক্রিপ্ট কোড রয়েছে । ফায়ার ইভেন্টটি যখন আমাদের টাইটানিয়াম কোড থেকে কার্যকর করা হয় তখন এটি কার্যকর করা হয়। ক্যানভাসের প্রস্থ এবং উচ্চতা এইচটিএমএলে বৈশিষ্ট্যগুলি যুক্ত করার পরিবর্তে জাভাস্ক্রিপ্ট থেকে নির্দিষ্ট করা হয়েছে, এটি যখন আমরা নতুন ডেটা সহ একটি নতুন চার্টটি পুনরায় জেনারেট করি তখন ক্যানভাসে কী রয়েছে তা পরিষ্কার করার উদ্দেশ্যটি পরিবেশন করে।