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