HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > Sencha发布移动 HTML5图表库

Sencha发布移动 HTML5图表库

Sencha发布移动 HTML5 图表库是本文要介绍的内容,主要是来了解HTML5 图表库Sencha Touch的使用,具体内容来看本文详解。

Sencha发布了Sencha Touch Charts:一套使用HTML5构建并针对移动设备优化过的富客户端、交互式的图表组件的Beta版。作为Sencha Touch的一部分,开发者可以使用该库构建针对Apple iOS、Android以及BlackBerry设备的交互式雷达、柱状、直线、堆叠以及饼状图。浅谈Sencha发布移动 HTML5 图表库

Sencha Touch Charts利用了移动设备上的硬件加速来优化性能,还支持自然手势,这一切简化了复杂数据集的显示。这些手势包括捏拉缩放、数据的点击放大以及轻拍展现等。

该库使用了HTML5的一些功能,如通过元素进行绘制和使用CSS3编写样式、能够在当今移动Web浏览器上发布富用户体验的应用。它构建在Sencha Touch之上,这是一个移动Web应用框架,目前可以免费用于评估目的。

在Sencha Touch Charts中,组件的定义及其交互是通过JavaScript实现的:

  1. var chartPanel = new Ext.chart.Panel({   
  2. title: 'Pie Chart',   
  3. fullscreen: true,   
  4. dockedItems: [...],   
  5. items: {   
  6. cls: 'pie1',   
  7. theme: 'Demo',   
  8. store: store1,   
  9. shadow: false,   
  10. animate: true,   
  11. insetPadding: 20,   
  12. legend: {   
  13. position: {   
  14. portrait: 'bottom',   
  15. landscape: 'left'  
  16. }   
  17. },   
  18. interactions: [    
  19. {   
  20. type: 'reset',   
  21. confirm: true  
  22. },   
  23. {   
  24. 24.          
  25. type: 'rotate'  
  26. 25.        
  27. },   
  28. {   
  29. type: 'iteminfo',   
  30. gesture: 'taphold',   
  31. listeners: {...}   
  32. },   
  33. {   
  34. type: 'piegrouping',   
  35. //snapWhileDragging: true,   
  36. onSelectionChange: function(me, items) {   
  37. ...   
  38. }   
  39. }   
  40. ],   
  41. series: [...]   
  42. }   
  43. }); 

样式是通过SASS/SCSS实现的,SASS/SCSS会被编译为CSS3:

  1. ....   
  2. 02.chart[cls=piecombo1] {   
  3. padding: 20;   
  4. series {   
  5. label {   
  6. display: rotate;   
  7. contrast: true;   
  8. font: 14px Arial;   
  9. }   
  10. } }   
  11. .... 

在Beta版期间,有一些问题需要解决,同时还会有一些变化:

Radar Axis目前在BlackBerry上无法显示属性

在iPad上过度放大会导致一个显示问题

交互的默认手势仍旧在审核当中,在正式版发布前可能会有一些变化

SASS语法仍旧在审核当中,在正式版发布前可能会有一些变化。

小结:浅谈Sencha发布移动 HTML5 图表库的内容介绍完了,希望通过本文的学习能对你有所帮助!

【Sencha发布移动 HTML5图表库】相关文章

1. Sencha发布移动 HTML5图表库

2. Chart.js:开源的HTML5图表库

3. Sencha 发布移动 HTML5 云计算平台

4. JavaScript 矢量图表库:两行代码实现精美图表

5. HTML5 图表库 ichartjs 正式发布 1.1 版本

6. Sencha Touch 2 开发者预览版发布,基于HTML5的移动应用框架

7. Ember Charts:基于 Ember & D3 的图表库

8. C3.js 0.4.10 发布,开源图表库

9. Sencha Touch 2:一行代码就将Web应用变本地应用

10. CSS生日快乐:CSS之父Håkon Wium Lie访谈录

本文来源:https://www.51html5.com/a1542.html

点击展开全部

﹝Sencha发布移动 HTML5图表库﹞相关内容

「Sencha发布移动 HTML5图表库」相关专题

其它栏目

也许您还喜欢