Sencha发布移动HTML5图表库

近日，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
      },
      {
        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;
    }
  }
}
...