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: [...]
}
});
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
样式是通过SASS/SCSS实现的，SASS/SCSS会被编译为CSS3：
....
02.chart[cls=piecombo1] {
padding: 20;
series {
label {
display: rotate;
contrast: true;
font: 14px Arial;
}
} }
....
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
在Beta版期间，有一些问题需要解决，同时还会有一些变化：
Radar Axis目前在BlackBerry上无法显示属性
在iPad上过度放大会导致一个显示问题
交互的默认手势仍旧在审核当中，在正式版发布前可能会有一些变化
SASS语法仍旧在审核当中，在正式版发布前可能会有一些变化。
小结：浅谈Sencha发布移动 HTML5 图表库的内容介绍完了，希望通过本文的学习能对你有所帮助！
