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按鈕並且單擊，可以解決縮進問題）：
$("#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窗格中的內容替換為以下代碼：
$("#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"}
},
{
startWidth: 1,
endWidth: 25,
startValue: 65,
endValue: 80,
startDistance: 0.98,
endDistance: 0.84,
style: {
fill: "#008000",
stroke: "#008000",
"stroke-width": "0"}
}]
}
);
之后我們的儀表就顯示成下面這個樣子：
第五步：手機測試
因為所有這一切都是在瀏覽器內部代碼和圖形渲染得支持下完成，你可以在iPad或者其他移動設備上運行jsFiddle。下面的截圖就是在我的iPad上運行的結果：
不錯，在機場的候機時間變得更有成效！
第六步：制作一個真正的應用程序
因為這只是純粹的客戶端代碼，儀表的值可以簡單的通過向其提供一個新的值改變。你可能會希望包含一個更新倉庫管理系統的值的一個小功能。僅僅作為一個簡單的例子，我們將等待三秒鍾，然后將其值修改為78（倉庫越來越接近他們的獎金！）。
向JavaScript窗格的最低部添加以下代碼，位於儀表函數之外：
window.setTimeout(function() { $("#gauge").wijradialgauge("option", "value", 78);},5000); window.setTimeout(function() {$("#gauge").wijradialgauge("option", "value", 78);},3000);
現在，在儀表呈現出來三秒鍾后，該值將更新為78。這很容易！
所有我們通過jsFiddle構建的代碼可以直接復制到一個HTML頁面，直接就可以工作。但是別忘記添加引用！將jsFiddle HTML窗格的內容放置到頁面的<body>，同時 將JavaScript的內容放置在script標簽之間（通常會放置在$(‘document’).ready()塊的內部）。我創建了一個簡單的HTML頁面以演示這樣如何工作： Download Wijgauge HTML sample。你可以直接在瀏覽器或者在任何你喜歡的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更新）!