Ext JS 4倒计时：图形和图表

      基本图形功能

      一直以来，在Web应用程序中进行绘图是很困难的事情。虽然我们很希望在应用程序中创建丰富的交互式图表或其他图像，但是HTML真的是不是这块料。通常，我们需要使用到Adobe Flash，但这给我们带来了两个难题：我们习惯书写Javascript代码，而且Flash并不是所有设备都支持。解决这个问题的方法就是使用一个纯Javascript的图形库，通过它创建丰富的图形和图表。它可以运行在ie6到iOS等任何平台，而且它已经成为Sencha Touch的附件。

      在Ext JS 4中，一个崭新的强大的Ext.draw类，不单使不同绘图引擎的绘图标准化，而且提供了简单统一的绘图API。Ext.draw将使用SVG或VML作为绘图方式，并自动根据不同浏览器使用最佳的绘图方式。一切都是基于矢量的，这意味着你可以将图形放大到任何级别，图形看起来依然清晰。（我们还计划在Ext 4.x版本中加入Canvas支持。）

      让我们来看一些演示。第一个我想演示的是使用Ext.draw创建的可调整大小的Sencha Touch Logo 。尝试放大Logo的，可以看到，尽管logo放大了，使用Ext.draw组件创建的logo仍然清晰。使用Ext.draw绘出logo很简单，它使用SVG接口，Ext.Draw知道如何使用它。任何可以使用SVG接口渲染的图形都可以使用Ext.draw进行渲染，甚至老虎：在这个例子 中，你可以在屏幕中拖动老虎，并尝试放大看看细节表现。这适用于任何浏览器。

      最后一个例子 是演示使用Ext.draw在所有浏览器中旋转文本。我们是否已经迷上了这些简单易用的例子？Ext.draw的确很棒，不过它只是开胃菜，主菜是Ext.chart。

      令人难以置信的图表

      由Ext.draw提供的新的图表功能是Ext JS 4中最令人兴奋的部分之一。我们的使命很明确，就是创造世界上最后的Javascript图表库。我们认为我们已经做到这一点。今天我们将有16个演示 与大家分享。请记住，这是测试版，但我们希望你会喜欢你所看到的。请注意，你在我们的演示网页上看到的的16个演示只是很少的一部分。

      我们要介绍的前两个图表你可以想到是线图和柱状图。我们有很多这样的演示，但这次让我们从全新的东西开始演示：面积图。下面是一个由一些随机数据做的简单的演示。尝试单击“Reload”按钮，你将看到图表的变化。单击数据标题可以显示或隐藏每个系列的数据。

 

      Ext.chart已集成到新的数据包，从而使你的数据图表显示非常容易。当然，该图表是完全动态的。在下面的例子，随机数据会每隔2秒就添加到store图表将会滚动，当图线到达右侧的时候横轴将更新。

      另一个新的图表是雷达图，它又分成填充图和非填充图两种。再次提醒，它很容易和你的数据关联，而且是动态的。

      我们也有很多传统的图表：线图、条形图、柱形图、饼图、散列图，或者由它们混合而成的图。

      这些图表功能完成集成在Ext JS 4里，不过这不是唯一可以看到它们的地方。你也可以在Sencha Touch的附件里找到它们。我要告诉你们的是，你也可以在还没将你的应用程序升级到Ext JS 4.x的时候使用这些图表。因为Ext Js 4使用全新的沙盒，所以你可以在同一页面中同时运行Ext JS 4和之前版本Ext Js，这意味着你不用升级你的Ext Js 3应用程序，就可以立竿见影的在应用程序中使用新的图表功能（当你获得了4.0的许可证）。

      主题和定制

      Ext JS 4最关键的一个要求就是能够极其简单的定制主题。这同样适用于绘图和图表，因为它们是简单的HTML基础元素。因此，我们尽我们所能着手创建可定制的图表库。几乎每个图表的每一个方面都可以通过一组CSS样式对微小的细节进行调整。改变颜色、字体和阴影是很容易的，而且图表渲染后仍然可以做修改。所有图表的外观和表现都可以很方便的被定义成图表主题，应用在你的应用程序中。我们将在另一篇博文中探讨这个问题。

      不单外观可以被定制，图像图表的行为也是可以被定制的。由于所有于绘制的图像都是一个Ext JS对象，因而很容易在图像中添加鼠标单击或停留等互动行为。如果你需要创建不包含在框架中的图像，你可以创建一个基于Ext.draw包的图像类，定制你需要图像。

      试用演示

      所有19个图像图像演示 你可以在线测试，也可以在这里下载 。

      今天，我们介绍了新的Ext JS图像图表包。我们迫不及待的将这些演示送到你们的手上并让你们看看它们是如何实现的。如果你想了解更多关于Ext JS 4关于图像图表的功能，我建议你们参加Sencha大会。

原文：http://www.sencha.com/blog/ext-js-4-preview-drawing-and-charting/