Asp.net與Dojo交互：儀器儀表實現

項目中需要用到儀器儀表的界面來顯示實時的采集信息值，於是便遍地尋找，參考了fusionchart和anychart之后，發現都是收費的，破解的又沒有這些功能，只好作罷。之后又找遍了JQuery的插件，也沒有找到，於是在灰心之時，Dojo的demo界面讓我欣喜若狂：Graphics, Charting and Vizualization 看罷之后，就決定采用Dojo了。

基礎知識概覽

這篇文章，主要講解如何利用Dojo原生的儀器儀表界面（Dojo有很強大的繪圖功能，后期如果有機會，會分享自繪的儀器儀表界面），來通過Ajax實現采集的數據實時傳送給儀表顯示。

首先，開始編碼之前，需要的東西就是DOJO包：Dojo Toolkit Release，下載之后解壓出來，拷貝到項目中即可。項目文件很多，你不需要的功能可以自己去掉。這次我們使用的東西在Dojox包下面。

這里簡單介紹下每個目錄中的不同內容（如果有誤，還請糾正）：

dojo目錄下的是支撐運行的基礎類庫定義。

dijit目錄下則是眾多的插件。

dojox目錄下則是第三方自行開發的插件。

而這次我們得東西則是放在了dojox/dgauges目錄下面，下面開始進入編碼階段。

操作步驟

首先，我們需要引入dojo.js：

<script src="Dojo/dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: true, async:true"></script>

引入的時候，我加入了parseOnLoad和async兩個config節點，對於前者，能夠自動引入相關的js文件，無需一個一個的添加。對於后者則是開啟異步模塊加載。

然后，我們可以利用require關鍵字引入需要的資源文件：

require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/default/CircularLinearGauge", "dojox/dgauges/GaugeBase"]）

 

再之后，我們就可以在畫板上畫出這個圓形儀表：

  function(ready, dom, CircularLinearGauge, GaugeBase) {
       linearGauge = new CircularLinearGauge({value:publicVariable, animationDuration:1200}, dom.byId("CircularGauge"));
       }

所需要的html代碼僅僅是一個div而已：

<div id="CircularGauge"   style="width:200px;height:200px" ></div>

這樣，當我們畫出來的時候，就會出現如圖所示的效果：

看上去是不是很容易呢？

 

但是，如何和Asp.net后台通過Ajax交互呢？

由於我比較喜歡Jquery，所以這里我決定采用Jquery的Ajax方式和Asp.net后台進行交互，請看代碼：

 var TriggerBackendData=function(){
        $.ajax({
                url:'Ajax/GaugeManager.asmx/ReturnBusinessData',
                type:'post',
                contentType: "application/json",  //from backend
                dataType: "json",  // send to backend
                data:'{}',
                success:function(result){
                     linearGauge.set("value", result.d);
                     linearGauge.refreshRendering();
                },
                error:function(data){
                    alert('Request Data Failure.');
                }
        });
    }

由於是測試，所以在后台，我就簡簡單單返回來一個隨機數字：

using System;
using System.ComponentModel;
using System.Web.Services;

namespace DojoDaemon.Ajax
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class GaugeManager : System.Web.Services.WebService
    {
        [WebMethod]
        public int ReturnBusinessData()
        {
            Random ran = new Random();
            return ran.Next(0, 100);
        }
    }
}

這樣，在前台，當我們設定為3s更新一次界面的時候，我們就可以看到儀表忽左忽右的隨着獲取的數據動態的轉動了，下面是完整的代碼部分：

   require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/default/CircularLinearGauge", "dojox/dgauges/GaugeBase"],
     function(ready, dom, CircularLinearGauge, GaugeBase) {
       linearGauge = new CircularLinearGauge({value:publicVariable, animationDuration:1200}, dom.byId("CircularGauge"));
       setInterval(TriggerBackendData, 3000);
    });

更多圖形

當然，系統中還自帶了其他三種圖形，我都一並列舉到下面：

半圓形儀表：

    require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/classic/SemiCircularLinearGauge", "dojox/dgauges/GaugeBase"],
     function(ready, dom, SemiCircularLinearGauge, GaugeBase) {
       semiGauge = new SemiCircularLinearGauge({value:publicVariable, animationDuration:1200}, dom.byId("CircularGauge2"));
       
       setInterval(function() {
                var randomValue = Math.floor((Math.random() * 100) + 1);
                semiGauge.set("value", randomValue);
                semiGauge.refreshRendering();
            }, 1000);
    });

橫向刻度尺：

    require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/classic/HorizontalLinearGauge", "dojox/dgauges/GaugeBase"],
     function(ready, dom, HorizontalLinearGauge, GaugeBase) {
       horizontalGauge = new HorizontalLinearGauge({value:publicVariable,Maximum:120,Minimum:0,animationDuration:1200}, dom.byId("HGauge3"));
       
       setInterval(function() {
                var randomValue = Math.floor((Math.random() * 100) + 1);
                horizontalGauge.set("value", randomValue);
                horizontalGauge.refreshRendering();
            }, 1000);
    });

縱向刻度尺：

     require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/default/VerticalLinearGauge", "dojox/dgauges/GaugeBase"],
     function(ready, dom, VerticalLinearGauge, GaugeBase) {
       verticalGauge = new VerticalLinearGauge({value:publicVariable,Maximum:120,Minimum:0,animationDuration:1200}, dom.byId("VGauge4"));
       
       setInterval(function() {
                var randomValue = Math.floor((Math.random() * 100) + 1);
                verticalGauge.set("value", randomValue);
                verticalGauge.refreshRendering();
            }, 1000);
    });

源碼下載

點擊這里下載源碼