وحدة ti.charts التي يمكنك العثور عليها في سوق Appcelerator مخصصة لنظام iOS فقط. أردت حلاً خفيف الوزن يمكن أن يعمل على كل من Android و iOS ويوفر أكثر المخططات شيوعًا ، الشريط ، الخط ، دائري ، إلخ. كانت أبسط طريقة للقيام بذلك هي استخدام مكتبة javascript للتخطيط داخل عرض ويب.
مؤهلاتي:
- بسرعة
- لا مسوغ التبعية
- الرسوم المتحركة على السحب الأولي
- التصميم الافتراضي الجيد
يوجد الآن الكثير من مكتبات javascript الرسومية ، ولكن ليس هناك مجموعة كاملة تلبي جميع المؤهلات المذكورة أعلاه. تعتمد كمية هائلة على مسج. لقد تعثرت مع بعض التي كانت تعتمد على jQuery من قبل ، وعادة ما يكون لديهم أوقات بطيئة في التقديم عندما يكون هناك الكثير من نقاط البيانات ، والكثير الكثير لا يعني الكثير. يعد عرض الويب أحد المكونات الأكثر كثافة للموارد التي يمكنك استخدامها ، وبالتالي كلما كان من الممكن فعل ذلك للحفاظ على الأمور بسيطة ، كان ذلك أفضل.
تعثرت في مكتبة جديدة في اليوم الآخر بعد أسابيع من البحث الذي يفعل بالضبط ما أريد. ChartJS. إليك كيفية تنفيذ مخطط في عرض ويب ، مع اجتياز نقاط بيانات مخصصة أيضًا.
يوجد 3 ملفات في هذا المشروع ، باستثناء الملفات التي تم إنشاؤها تلقائيًا
app.js
المصدر / chart.html
source / chart.wvjs - يحتوي هذا الملف على javascript من Chart.js الموجود هنا
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'})؛ var chartView = Ti.UI.createWebView ({ارتفاع: 200 ، عرض: 320 ، يسار: 0 ، أعلى: 0 ، showScrollbars: false ، touchEnabled: false ، url: '/source/chart.html'})؛ win.add (chartView)؛ var button = Ti.UI.createButton ({title: 'Regenerate'، top: 220،})؛ win.add (زر)؛ button.addEventListener ('click' ، function () {var options = {}؛ options.data = new Array (Math.floor (Math.random () * 1001) ، Math.floor (Math.random () * 1001) ، Math.floor (Math.random () * 1001) ، Math.floor (Math.random () * 1001) ، Math.floor (Math.random () * 1001)) ؛ Ti.App.fireEvent ('renderChart' ، خيارات)؛ })؛ win.open ()؛
نبدأ بإنشاء إطارنا وعرض الويب وزر لإعادة رسم الرسم البياني ببيانات جديدة. عند النقر فوق الزر ، نقوم بإنشاء كائن يسمى خيارات. يتم إنشاء 5 أرقام عشوائية بين 1 و 1000 وتعيينها لصفيف options.data.
ثم يسمى Ti.App.fireEvent مع 2 وسيطات. renderChart هو العنصر الأول الذي تم اجتيازه ، وهذا يعني أنه في مكان ما في المدونة الخاصة بنا ، نحتاج إلى الحصول على مستمع حدث مطابق يحمل نفس الاسم. العنصر الثاني هو كائن الخيارات. الآن ، قد تسأل نفسك عن سبب عدم تمرير صفيف بشكل مباشر … لا يعمل ، من المتوقع وجود كائن. من خلال إرفاق الصفيف بالكائن ، يمكننا تمرير هذه البيانات إلى مستمع الحدث الذي سيكون موجودًا في ملف html الخاص بنا.
لعرض الويب للتواصل مع Titanium نفسه ، يعد استخدام معالجات الأحداث مثل هذا ضروريًا. يحتاج Titanium و webView إلى طريقة لفتح خط اتصال ، وهذا بالضبط ما يفعله هذا.
عدد المشاهدات / chart.html
ملحق الملف الافتراضي لمكتبتنا الرسومية هو .js. لقد وجدت أنه يمكن أن يكون هناك تعارضات مع Titanium عند استخدام ملحق .js ، لذا تأكد من إعادة تسمية ملفات جافا سكريبت التي يتم استدعاؤها من عرض ويب. تفضيلي هو .wvjs ، ولكن يمكنك حقًا استخدام أي شيء.
يمكنك أن ترى أن لدينا كود جافا سكريبت الخاص بنا داخل eventListener for renderChart . يتم تنفيذ هذا عندما يتم تنفيذ fireEvent من رمز التيتانيوم لدينا. يتم تحديد العرض والارتفاع للوحة القماشية من javascript بدلاً من إضافة السمات إلى HTML ، وهذا يخدم غرض مسح ما هو موجود في اللوحة القماشية عندما نقوم بإعادة إنشاء مخطط جديد ببيانات جديدة.
