淺談Sencha發(fā)布移動(dòng) HTML5圖表庫(kù)
Sencha發(fā)布移動(dòng) HTML5 圖表庫(kù)是本文要介紹的內(nèi)容,主要是來(lái)了解HTML5 圖表庫(kù)在Sencha Touch的使用,具體內(nèi)容來(lái)看本文詳解。
Sencha發(fā)布了Sencha Touch Charts:一套使用HTML5構(gòu)建并針對(duì)移動(dòng)設(shè)備優(yōu)化過(guò)的富客戶端、交互式的圖表組件的Beta版。作為Sencha Touch的一部分,開(kāi)發(fā)者可以使用該庫(kù)構(gòu)建針對(duì)Apple iOS、Android以及BlackBerry設(shè)備的交互式雷達(dá)、柱狀、直線、堆疊以及餅狀圖。
Sencha Touch Charts利用了移動(dòng)設(shè)備上的硬件加速來(lái)優(yōu)化性能,還支持自然手勢(shì),這一切簡(jiǎn)化了復(fù)雜數(shù)據(jù)集的顯示。這些手勢(shì)包括捏拉縮放、數(shù)據(jù)的點(diǎn)擊放大以及輕拍展現(xiàn)等。
該庫(kù)使用了HTML5的一些功能,如通過(guò)<canvas>元素進(jìn)行繪制和使用CSS3編寫(xiě)樣式、能夠在當(dāng)今移動(dòng)Web瀏覽器上發(fā)布富用戶體驗(yàn)的應(yīng)用。它構(gòu)建在Sencha Touch之上,這是一個(gè)移動(dòng)Web應(yīng)用框架,目前可以免費(fèi)用于評(píng)估目的。
在Sencha Touch Charts中,組件的定義及其交互是通過(guò)JavaScript實(shí)現(xiàn)的:
- var chartPanel = new Ext.chart.Panel({
- title: 'Pie Chart',
- fullscreen: true,
- dockedItems: [...],
- items: {
- cls: 'pie1',
- theme: 'Demo',
- store: store1,
- shadow: false,
- animate: true,
- insetPadding: 20,
- legend: {
- position: {
- portrait: 'bottom',
- landscape: 'left'
- }
- },
- interactions: [
- {
- type: 'reset',
- confirm: true
- },
- {
- 24.
- type: 'rotate'
- 25.
- },
- {
- type: 'iteminfo',
- gesture: 'taphold',
- listeners: {...}
- },
- {
- type: 'piegrouping',
- //snapWhileDragging: true,
- onSelectionChange: function(me, items) {
- ...
- }
- }
- ],
- series: [...]
- }
- });
樣式是通過(guò)SASS/SCSS實(shí)現(xiàn)的,SASS/SCSS會(huì)被編譯為CSS3:
- ....
- 02.chart[cls=piecombo1] {
- padding: 20;
- series {
- label {
- display: rotate;
- contrast: true;
- font: 14px Arial;
- }
- } }
- ....
在Beta版期間,有一些問(wèn)題需要解決,同時(shí)還會(huì)有一些變化:
Radar Axis目前在BlackBerry上無(wú)法顯示屬性
在iPad上過(guò)度放大會(huì)導(dǎo)致一個(gè)顯示問(wèn)題
交互的默認(rèn)手勢(shì)仍舊在審核當(dāng)中,在正式版發(fā)布前可能會(huì)有一些變化
SASS語(yǔ)法仍舊在審核當(dāng)中,在正式版發(fā)布前可能會(huì)有一些變化。
小結(jié):淺談Sencha發(fā)布移動(dòng) HTML5 圖表庫(kù)的內(nèi)容介紹完了,希望通過(guò)本文的學(xué)習(xí)能對(duì)你有所幫助!