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 图表库的内容介绍完了，希望通过本文的学习能对你有所帮助！
