Sencha 发布移动 HTML5 图表库

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

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

该库使用了 HTML5 的一些功能，如通过元素进行绘制和使用 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
     },
     {
       type: 'rotate'
     },
     {
       type: 'iteminfo',
       gesture: 'taphold',
       listeners: {...}
     },
     {
       type: 'piegrouping',
       //snapWhileDragging: true,
       onSelectionChange: function(me, items) {
         ...
       }
     }
   ],
   series: [...]
 }
});

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

 
...
chart[cls=piecombo1] {
 padding: 20;
 series {
   label {
     display: rotate;
     contrast: true;
     font: 14px Arial;
   }
 }
}
...

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

• Radar Axis 目前在 BlackBerry 上无法显示属性
• 在 iPad 上过度放大会导致一个显示问题
• 交互的默认手势仍旧在审核当中，在正式版发布前可能会有一些变化
• SASS 语法仍旧在审核当中，在正式版发布前可能会有一些变化
• 其他

InfoQ 有幸联系到了 Sencha 的代表以深入了解关于该新产品的一些细节信息：

InfoQ：你提到为了改进性能，你需要在核心绘图系统中实现一个 HTML5 Canvas 引擎。能否向广大读者透露一些关于该引擎的一些技术方面的细节信息？

Sencha：在 HTML5 浏览器中有几种绘图技术可供选择，分别是 SVG 与 Canvas。我们之所以为移动设备选择 Canvas 是出于两个主要原因。首先，Honeycomb 之前的 Android 系统并不支持 SVG。这样，为了支持市场中成千上万的 Android 2.x 设备，我们就没法使用 SVG 了。其次，根据我们的测试，Canvas 在所有的移动设备（手机与平板电脑）上具有最佳的通用性能表现。

InfoQ：Sencha Touch Charts 与其他产品如 Sencha Touch 或 Ext JS 4 之间有何联系呢？

Sencha：Sencha Touch Charts 是免费 Sencha Touch 的一个付费附加组件。Sencha Touch 是我们的移动 HTML5 框架，而 Ext JS 则是我们的桌面框架。我们尚未宣布最终的定价——请大家拭目以待！

InfoQ：几年前，甚至连简单的桌面图表也很难实现出跨浏览器版本。你认为 HTML5 有哪些技术对于这个项目起到了至关重要的作用？

Sencha：一般来说，对于图表与数据可视化来说，最大的发展在于浏览器中绘图系统的巨大改进。传统上，浏览器擅长于文本与文档布局，但借助于 Canvas 与 SVG，浏览器现在可以实现之前需要借助于 Flash 或 Sliverlight 才能实现的一些功能。因为浏览器内嵌了这些能力，因此你可以使用他们取代插件了。

InfoQ：相比于桌面浏览器来说，在与移动浏览器如移动 WebKit 打交道的过程中，你遇到的最大挑战是什么呢？

Sencha：我们在与移动设备打交道的过程中所遇到的最大挑战与任何移动开发者一样，那就是性能。我们将性能划分为两个坐标轴：首先就是原生的计算机 /CPU 能量。我们付出了巨大的努力来确保不会加重 CPU 的负担，这样图表就能以最快的速度响应。其次就是内存。移动设备的 RAM 大小很有限，这样我们做了很多额外的工作来确保在设备现有内存的情况下能够让图表平顺地显示。

InfoQ：你们为何选择了 SASS 语法来编写样式而非 SCSS 语法或普通的 CSS3？

Sencha：SASS 与 SCSS 是一回事。SCSS 只不过是 SASS v3 中新语法的名字而已。之所以使用它而没有选择 CSS3 在于它向 CSS 中添加了很多类似于元编程的功能。比如说，你可以说按钮的颜色比背景色淡 20%，并使用变量与函数来驱动应用的全部样式——而不必手工编写全部样式。

InfoQ：能否谈谈跨浏览器的交互式图表组件？

Sencha：现在的 Touch Charts 可用于各种移动浏览器平台。你可以在众多不同的移动 OS 数据集上通过捏拉、摇动、点击等方式来查看数据。

InfoQ：Touch Charts 目前还是 Beta 版，何时打算发布首个正式版呢？

Sencha：首个正式版（v1）将于下个月发布。

感兴趣的读者可以在 InfoQ 上找到关于 Sencha Touch 、 Mobile 与 ExtJS 的更多信息！

查看英文原文： Mobile HTML5 Charts by Sencha