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