டைட்டானியம் அப்ஸிலரேட்டருடன் விளக்கப்படங்களைக் காண்பிக்கும்

அப்ஸிலரேட்டர் சந்தையில் நீங்கள் காணக்கூடிய ti.charts தொகுதி iOS க்கு மட்டுமே. அண்ட்ராய்டு மற்றும் iOS இரண்டிலும் செயல்படக்கூடிய ஒரு இலகுரக தீர்வை நான் விரும்பினேன், மேலும் மிகவும் பொதுவான விளக்கப்படங்கள், பட்டி, வரி, பை போன்றவற்றை வழங்க முடியும். இதைப் பற்றிய எளிய வழி வலை பார்வையில் ஒரு தரவரிசை ஜாவாஸ்கிரிப்ட் நூலகத்தைப் பயன்படுத்துவதே ஆகும்.

எனது தகுதிகள்:

1. விரைவு
2. JQuery சார்பு இல்லை
3. ஆரம்ப டிராவில் அனிமேஷன்
4. நல்ல இயல்புநிலை ஸ்டைலிங்

இப்போது நிறைய ஜாவாஸ்கிரிப்ட் தரவரிசை நூலகங்கள் உள்ளன, ஆனால் மேலே உள்ள எல்லா தகுதிகளையும் பூர்த்தி செய்யும் முழு நிறைய இல்லை. ஒரு அளவுக்கு மீறிய தொகை jQuery ஐ நம்பியுள்ளது. இதற்கு முன்பு jQuery ஐ சார்ந்து இருக்கும் சிலவற்றைக் கொண்டு நான் குழம்பிவிட்டேன், மேலும் அவை பொதுவாக பல தரவு புள்ளிகள் இருக்கும்போது மெதுவாக வழங்குவதற்கான நேரங்களைக் கொண்டிருக்கின்றன, மேலும் பலவற்றால் நான் முழு அளவையும் குறிக்கவில்லை. வெப் வியூ என்பது நீங்கள் பயன்படுத்தக்கூடிய மிகவும் வளமான தீவிரமான கூறுகளில் ஒன்றாகும், எனவே விஷயங்களை எளிமையாக வைத்திருக்க சிறந்தது, சிறந்தது.

பல வாரங்கள் தேடியபின் மறுநாள் நான் ஒரு புதிய நூலகத்தில் தடுமாறினேன், அது எனக்குத் தேவையானதைச் செய்கிறது. ChartJS. தனிப்பயன் தரவு புள்ளிகளை அனுப்பும் போது, ​​ஒரு வலை காட்சியில் ஒரு விளக்கப்படத்தை எவ்வாறு செயல்படுத்தலாம் என்பது இங்கே.

இந்த திட்டத்தில் 3 கோப்புகள் உள்ளன, தானாக உருவாக்கப்பட்ட கோப்புகளைத் தவிர
app.js
மூல / chart.html
source / chart.wvjs - இந்த கோப்பில் இங்கே அமைந்துள்ள 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 பொத்தான் = Ti.UI.createButton ({தலைப்பு: 'மீளுருவாக்கம்', மேல்: 220, }); win.add (பொத்தான்); button.addEventListener ('கிளிக்', செயல்பாடு () {var விருப்பங்கள் = {options; options.data = புதிய வரிசை (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%);, விருப்பங்கள்); }); win.open ();

புதிய தரவுடன் வரைபடத்தை மீண்டும் வரைவதற்கு எங்கள் சாளரம், வலை பார்வை மற்றும் ஒரு பொத்தானை உருவாக்குவதன் மூலம் தொடங்குவோம். பொத்தானைக் கிளிக் செய்யும்போது, ​​விருப்பங்கள் என்று ஒரு பொருளை உருவாக்குகிறோம். 1 முதல் 1000 வரை 5 சீரற்ற எண்கள் உருவாக்கப்பட்டு விருப்பங்களுக்கு ஒதுக்கப்படுகின்றன. தரவு வரிசை.

Ti.App.fireEvent பின்னர் 2 வாதங்களுடன் அழைக்கப்படுகிறது. renderChart என்பது கடந்து வந்த 1 வது உருப்படி, இதன் பொருள் எங்களுடைய குறியீட்டில் எங்காவது இருந்தால், அதே பெயருடன் தொடர்புடைய நிகழ்வு கேட்பவரை நாம் கொண்டிருக்க வேண்டும். இரண்டாவது உருப்படி விருப்பங்கள் பொருள். இப்போது, ​​நான் ஏன் ஒரு வரிசையை நேரடியாக அனுப்பவில்லை என்று நீங்களே கேட்டுக்கொள்ளலாம் …… இது வேலை செய்யாது, ஒரு பொருள் எதிர்பார்க்கப்படுகிறது. பொருளை வரிசையுடன் இணைப்பதன் மூலம், அந்தத் தரவை எங்கள் HTML கோப்பில் இருக்கும் நிகழ்வு கேட்பவருக்கு அனுப்பலாம்.

வெப் வியூ டைட்டானியத்துடன் தொடர்பு கொள்ள, இது போன்ற நிகழ்வு கையாளுபவர்களைப் பயன்படுத்துவது அவசியம். டைட்டானியம் மற்றும் வெப் வியூவுக்கு ஒரு தகவல்தொடர்பு வரியைத் திறக்க ஒரு வழி தேவை, அதுதான் இதைச் செய்கிறது.

காட்சிகள் / chart.html

எங்கள் விளக்கப்பட நூலகத்தின் இயல்புநிலை கோப்பு நீட்டிப்பு .js. .Js நீட்டிப்பைப் பயன்படுத்தும் போது டைட்டானியத்துடன் மோதல்கள் இருக்கக்கூடும் என்று நான் கண்டறிந்தேன், எனவே ஒரு வலைக் காட்சியில் இருந்து அழைக்கப்படும் உங்கள் ஜாவாஸ்கிரிப்ட் கோப்புகளின் மறுபெயரிடுவதை உறுதிசெய்க. என் விருப்பம் .wvjs, ஆனால் நீங்கள் உண்மையில் எதையும் பயன்படுத்தலாம்.

RenderChart க்கான நிகழ்வுப்பட்டியலில் எங்கள் தரவரிசை ஜாவாஸ்கிரிப்ட் குறியீடு இருப்பதை நீங்கள் காணலாம் . எங்கள் டைட்டானியம் குறியீட்டிலிருந்து ஃபயர்எவென்ட் செயல்படுத்தப்படும் போது இது செயல்படுத்தப்படுகிறது. கேன்வாஸிற்கான அகலமும் உயரமும் HTML இல் பண்புகளைச் சேர்ப்பதற்குப் பதிலாக ஜாவாஸ்கிரிப்டிலிருந்து குறிப்பிடப்படுகின்றன, இது புதிய தரவுகளுடன் புதிய விளக்கப்படத்தை மீண்டும் உருவாக்கும்போது கேன்வாஸில் என்ன இருக்கிறது என்பதை அழிக்கும் நோக்கத்திற்கு இது உதவுகிறது.