โมดูล ti.charts ที่คุณสามารถหาได้ใน Appcelerator ตลาดสำหรับ iOS เท่านั้น ฉันต้องการโซลูชันที่มีน้ำหนักเบาซึ่งสามารถทำงานได้ทั้ง Android และ iOS และให้แผนภูมิ, แถบ, เส้น, พายและอื่น ๆ ที่พบได้บ่อยที่สุดวิธีที่ง่ายที่สุดในการทำเช่นนี้คือฉันจะใช้ไลบรารีจาวาสคริปต์ในมุมมองเว็บ
คุณสมบัติของฉัน:
- รวดเร็ว
- ไม่มีการพึ่งพา jQuery
- นิเมชั่นเมื่อวาดครั้งแรก
- สไตล์เริ่มต้นที่ดี
ขณะนี้มีไลบรารีแผนภูมิ javascript จำนวนมาก แต่ไม่มากที่ตรงตามคุณสมบัติทั้งหมดข้างต้น จำนวนเงินที่มากเกินไปขึ้นอยู่กับ jQuery ฉันเคยยุ่งกับไม่กี่ที่ขึ้นอยู่กับ jQuery ก่อนและพวกเขามักจะมีการแสดงผลช้าเมื่อมีจุดข้อมูลมากเกินไปและโดยมากฉันหมายถึงไม่มาก webView เป็นหนึ่งในองค์ประกอบที่ใช้ทรัพยากรมากที่สุดที่คุณสามารถใช้ได้ดังนั้นยิ่งสามารถทำสิ่งต่าง ๆ ให้เรียบง่ายยิ่งดี
ฉันพบห้องสมุดใหม่ในวันอื่น ๆ หลังจากค้นหาหลายสัปดาห์ซึ่งทำในสิ่งที่ฉันต้องการ ChartJS นี่คือวิธีการนำแผนภูมิไปใช้กับ webView ในขณะเดียวกันก็ผ่านจุดข้อมูลที่กำหนดเอง
มี 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.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 ถึง 1, 000 จะถูกสร้างและกำหนดให้กับอาร์เรย์ options.data
Ti.App.fireEvent จะถูกเรียกด้วยอาร์กิวเมนต์ 2 ตัว renderChart เป็นไอเท็มแรกที่ส่งผ่านและนี่หมายความว่ามีบางอย่างในรหัสของเราเราจำเป็นต้องมีฟังเหตุการณ์ที่สอดคล้องกับชื่อเดียวกัน รายการที่สองคือวัตถุตัวเลือก ตอนนี้คุณอาจถามตัวเองว่าทำไมฉันไม่ผ่านอาร์เรย์โดยตรง……มันไม่ทำงานวัตถุที่ถูกคาดหวัง โดยการแนบอาร์เรย์กับวัตถุเราสามารถส่งผ่านข้อมูลนั้นไปยังผู้ฟังเหตุการณ์ที่จะอยู่ในไฟล์ html ของเรา
เพื่อให้ webView สื่อสารกับไทเทเนียมเองการใช้ตัวจัดการเหตุการณ์เช่นนี้เป็นสิ่งจำเป็น Titanium และ webView ต้องการวิธีในการเปิดสายการสื่อสารและนั่นคือสิ่งที่ทำ
มุมมอง / chart.html
นามสกุลไฟล์เริ่มต้นของห้องสมุดสร้างแผนภูมิของเราคือ. js ฉันพบว่าอาจมีข้อขัดแย้งกับไทเทเนียมเมื่อใช้ส่วนขยาย. js ดังนั้นตรวจสอบให้แน่ใจว่าคุณเปลี่ยนชื่อไฟล์จาวาสคริปต์ที่ถูกเรียกจาก webView ความชอบของฉันคือ. wvjs แต่คุณสามารถใช้อะไรก็ได้
คุณสามารถเห็นเรามีรหัสจาวาสคริปต์ของเราใน eventListener สำหรับ renderChart สิ่งนี้จะถูกดำเนินการเมื่อ fireEvent ถูกเรียกใช้จากรหัสไทเทเนียมของเรา ความกว้างและความสูงของผืนผ้าใบถูกระบุจากจาวาสคริปต์แทนการเพิ่มคุณสมบัติลงใน HTML สิ่งนี้มีจุดประสงค์เพื่อล้างสิ่งที่มีอยู่ในผืนผ้าใบเมื่อเราสร้างแผนภูมิใหม่ด้วยข้อมูลใหม่
