Wijmo 的巨大優勢之一就是，它們是非常流行的jQuery UI部件。這將意味着它們的基礎類庫具有很多支持者。具有衆多的支持者同時也意味着更多好用的工具。這些好用的工具之一就是很酷的jsFiddle，這是一個實時的HTML/CSS/JavaScript snippet編輯器。用它來以一種迅速的無開銷的方式測試一些小東西是相當棒的。事實上，我們可以用它來實時的測試一些wijmo部件，這裏我們會看到如何做到這一點。因爲Wijmo gauges使用到了基於瀏覽器能力的SVG或者VML，這些是“無插件網頁”的一個重要的部分（正在被iOS移動設備上的Safari和Windows8中間的Metro IE大力推廣），也是我們可以這樣擺弄他們的原因。
如果你正在建立一個ASP.NET MVC 應用程序， Wijmo Complete包含在Studio for ASP.NET Wijmo的MVC Tools 。如果你正在使用一種不同的技術（比如說Ruby或者PHP），你可以直接去Wijmo 站點尋找非.NET的套件包。無論哪種方式，我們在本篇博客中，我們將引用CDN鏈接上的Wijmo站點 http://wijmo.com/downloads/。
在這篇文章中，我們將使用到儀表部件。讓我們切入今的正題吧！
第一步：選擇框架
打開jsFiddle.net，在左側的下拉列表中選擇jQuery 1.7.1。稍等片刻等待關聯的框架出現，之後勾選上jQuery UI 1.8.16。它應當看起來像下面這個樣子：
![]()
第二步：添加對Wijmo的引用
緊挨着選擇框架的位置時添加資源。這裏我們需要添加對Wijmo的引用。 jQuery 以及 jQuery UI已經被處理過了，所以我們只需要添加主題，Wijmo樣式表以及到Wijmo庫的引用。所有我們需要知道的是庫的URL。jsFiddle將會處理關係和類型。只需要將URL粘貼到文本框，之後點擊巨大的加號按鈕。添加的順序很重要，鏈接將按照你添加的順序自上而下的添加。依照Wijmo CDN文檔中顯示的順序就不會出什麼問題。
最終的結果應當是這個樣子的：
![]()
第三步：添加HTML和JavaScript
爲了快速上手，你可以從我們的Wijmo Explorer中間拷貝示例，或者使用Quick Start中提供的示例代碼。這裏我們從最基本的儀表盤代碼開始，然後逐步的建立一些樣式。
使得你的HTML窗格看起來像下面這樣（點擊查看放大結果）：
![]()
然後向JavaScript窗格中添加以下JavaScript代碼：
![]()
現在，單擊頂部的運行按鈕，你會看到一個非常基本的儀表出現在結果窗格中！
![]()
第四步：變得更花哨！
酷！我們現在可以快速的測試這個儀表不同的樣式和屬性。這個儀表可以顯示成任何東西，從溫度到速度表到轉速錶再到訂單完成率。讓我們假設我們是一個小型的倉庫，我們每週有兩個級別的獎金目標-完成80個訂單是第一級獎金目標，而完成90個訂單是第二級獎金目標。這樣，倉庫的工作人員可以追蹤他們的進展，我們將添加一些彩色的範圍並且擴大儀表盤顯示的值的範圍，同時在加上其他的一些樣式選項。這些選項將全部列舉在http://wijmo.com/wiki/index.php/RadialGauge.文檔中。請注意“ranges”是一個數組，這是因爲每一個儀表可以擁有不止一個範圍設定。
要小小的改動一下樣式，我們決定擴展範圍，稍稍的旋轉一下儀表，並且添加我們自定義的兩個範圍。和其它Wijmo儀表所有的功能類似（以及任何通用的Wijmo部件），選項可以通過屬性數組很容易的被設置。將現有的JavaScript代碼替換成以下代碼片斷（提示：在粘貼之後，在頂部菜單中找到TidyUp按鈕並且單擊，可以解決縮進問題）：
在這篇文章中，我們將使用到儀表部件。讓我們切入今的正題吧！
第一步：選擇框架
打開jsFiddle.net，在左側的下拉列表中選擇jQuery 1.7.1。稍等片刻等待關聯的框架出現，之後勾選上jQuery UI 1.8.16。它應當看起來像下面這個樣子：
第二步：添加對Wijmo的引用
緊挨着選擇框架的位置時添加資源。這裏我們需要添加對Wijmo的引用。 jQuery 以及 jQuery UI已經被處理過了，所以我們只需要添加主題，Wijmo樣式表以及到Wijmo庫的引用。所有我們需要知道的是庫的URL。jsFiddle將會處理關係和類型。只需要將URL粘貼到文本框，之後點擊巨大的加號按鈕。添加的順序很重要，鏈接將按照你添加的順序自上而下的添加。依照Wijmo CDN文檔中顯示的順序就不會出什麼問題。
最終的結果應當是這個樣子的：
第三步：添加HTML和JavaScript
爲了快速上手，你可以從我們的Wijmo Explorer中間拷貝示例，或者使用Quick Start中提供的示例代碼。這裏我們從最基本的儀表盤代碼開始，然後逐步的建立一些樣式。
使得你的HTML窗格看起來像下面這樣（點擊查看放大結果）：
然後向JavaScript窗格中添加以下JavaScript代碼：
現在，單擊頂部的運行按鈕，你會看到一個非常基本的儀表出現在結果窗格中！
第四步：變得更花哨！
酷！我們現在可以快速的測試這個儀表不同的樣式和屬性。這個儀表可以顯示成任何東西，從溫度到速度表到轉速錶再到訂單完成率。讓我們假設我們是一個小型的倉庫，我們每週有兩個級別的獎金目標-完成80個訂單是第一級獎金目標，而完成90個訂單是第二級獎金目標。這樣，倉庫的工作人員可以追蹤他們的進展，我們將添加一些彩色的範圍並且擴大儀表盤顯示的值的範圍，同時在加上其他的一些樣式選項。這些選項將全部列舉在http://wijmo.com/wiki/index.php/RadialGauge.文檔中。請注意“ranges”是一個數組，這是因爲每一個儀表可以擁有不止一個範圍設定。
要小小的改動一下樣式，我們決定擴展範圍，稍稍的旋轉一下儀表，並且添加我們自定義的兩個範圍。和其它Wijmo儀表所有的功能類似（以及任何通用的Wijmo部件），選項可以通過屬性數組很容易的被設置。將現有的JavaScript代碼替換成以下代碼片斷（提示：在粘貼之後，在頂部菜單中找到TidyUp按鈕並且單擊，可以解決縮進問題）：
$("#gauge").wijradialgauge({ value: 60, max: 120, startAngle: -33, sweepAngle: 240, width: 400, height: 400, ranges: [{ startWidth: 25, endWidth: 25, startValue: 80, endValue: 90, startDistance: 0.84, endDistance: 0.84, style: { fill: "#FFFF00", stroke: "#FFFF00", "stroke-width": "0"}}, { startWidth: 25, endWidth: 25, startValue: 90, endValue: 100, startDistance: 0.84, endDistance: 0.84, style: { fill: "#FF0000", stroke: "#FF0000", "stroke-width": "0"} }] } );
現在我們的儀表看起來像下面的圖片。它簡單易讀，和諧並且向倉庫人員提供明確的目標。
到目前爲止還不錯，但我們可以在添加一點點微調，以提示它們何時已經接近目標。讓我們添加一個從65到80的錐形範圍，目的是在他們接近目標時，激發工作的熱情。將你的JavaScript窗格中的內容替換爲以下代碼：
1 $("#gauge").wijradialgauge({ 2 value: 60, 3 max: 120, 4 startAngle: -33, 5 sweepAngle: 240, 6 width: 400, 7 height: 400, 8 ranges: [{ 9 startWidth: 25, 10 endWidth: 25, 11 startValue: 80, 12 endValue: 90, 13 startDistance: 0.84, 14 endDistance: 0.84, 15 style: { 16 fill: "#FFFF00", 17 stroke: "#FFFF00", 18 "stroke-width": "0"}}, 19 { 20 startWidth: 25, 21 endWidth: 25, 22 startValue: 90, 23 endValue: 100, 24 startDistance: 0.84, 25 endDistance: 0.84, 26 style: { 27 fill: "#FF0000", 28 stroke: "#FF0000", 29 "stroke-width": "0"} 30 }, 31 { 32 startWidth: 1, 33 endWidth: 25, 34 startValue: 65, 35 endValue: 80, 36 startDistance: 0.98, 37 endDistance: 0.84, 38 style: { 39 fill: "#008000", 40 stroke: "#008000", 41 "stroke-width": "0"} 42 }] 43 } 44 );
第五步：手機測試
因爲所有這一切都是在瀏覽器內部代碼和圖形渲染得支持下完成，你可以在iPad或者其他移動設備上運行jsFiddle。下面的截圖就是在我的iPad上運行的結果：
不錯，在機場的候機時間變得更有成效！
第六步：製作一個真正的應用程序
因爲這只是純粹的客戶端代碼，儀表的值可以簡單的通過向其提供一個新的值改變。你可能會希望包含一個更新倉庫管理系統的值的一個小功能。僅僅作爲一個簡單的例子，我們將等待三秒鐘，然後將其值修改爲78（倉庫越來越接近他們的獎金！）。
向JavaScript窗格的最低部添加以下代碼，位於儀表函數之外：
window.setTimeout(function() { $("#gauge").wijradialgauge("option", "value", 78);},5000); window.setTimeout(function() {$("#gauge").wijradialgauge("option", "value", 78);},3000);
所有我們通過jsFiddle構建的代碼可以直接複製到一個HTML頁面，直接就可以工作。但是別忘記添加引用！將jsFiddle HTML窗格的內容放置到頁面的<body>，同時 將JavaScript的內容放置在script標籤之間（通常會放置在$(‘document’).ready()塊的內部）。我創建了一個簡單的HTML頁面以演示這樣如何工作：
你可以直接在瀏覽器或者在任何你喜歡的HTML編輯器打開這個文件 。
總結
今天我們在這裏做了幾件事情。首先，我們看到了jsFiddle是如何不錯地快速構建和測試客戶端代碼。其次，我們已經認識到使用Wijmo gauges是多麼的容易。你可以在這裏觀看這個sample的最終版本http://jsfiddle.net/rjdudley/TgNZX/9/，但是希望你已經建立起來自己的程序。
向jsFiddle team致以誠摯的感謝！
我想向jsFiddle team送上一個巨大的“謝謝”，因爲他們創造了這樣一個很酷的工具！那麼的簡單，優雅，正是我們在許多情況下需要的。
Wijmo下載，請進入Studio for ASP.NET Wijmo 2012 v1正式發佈（2012.03.22更新）!