基本圖形功能
一直以來，在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/
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/tianxiaode/archive/2011/02/10/6177517.aspx