Sencha发布移动HTML5图表库

分手后的思念是犯贱 2022-06-18 00:16 140阅读 0赞

本文来源于我在InfoQ中文站翻译的文章，原文地址是：http://www.infoq.com/cn/news/2011/08/sencha-touch-charts

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

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

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

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][Sencha Touch 1]、[Mobile][]与[ExtJS][]的更多信息！

**查看英文原文：**[Mobile HTML5 Charts by Sencha][]

[Sencha Touch Charts]: http://www.sencha.com/products/touch/charts/
[Sencha Touch]: http://www.infoq.com/news/2010/11/sencha-touch-1.0-free
[Link 1]: http://dev.sencha.com/deploy/touch-charts-beta/release-notes.html
[Sencha Touch 1]: http://www.infoq.com/sencha-touch
[Mobile]: http://www.infoq.com/mobile
[ExtJS]: http://www.infoq.com/extjs
[Mobile HTML5 Charts by Sencha]: http://www.infoq.com/news/2011/08/sencha-touch-charts