定製的JQuery UI儀表板插件

Question

我想爲我的應用程序使用jQuery儀表板插件。我已經看到了http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html中記錄的插件。

這是一個很好的插件，但我的要求有點不同。我只想進行一次服務器調用，並獲取儀表板各個小部件所需的數據。我們將在儀表板內部使用很多小部件[圖表基本上]，因此我們認爲，通過進行一次服務器調用，可以獲取每個小部件所需的配置和數據，從而提高性能。我剛纔提到的鏈接，加載後的小部件都會進行單獨調用以從服務器獲取其數據。

是否有任何這樣的jquery儀表板插件，將滿足我的要求。任何指向這些的指針也會非常有幫助。

感謝， Anirban

Answer 1

因此，這裏是我做的解決方案！

我使用了與http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html相同的插件。

的方法，我把：

1）向服務器單獨調用來從服務器獲取的所有數據。我這樣做，它一氣呵成返回圖表所需的數據在服務器上的模型：我的模型看起來是這樣的：

public class DashboardWidget 
{ 

    public DashboardWidget() 
    { 
     open = "true"; 
    } 

    public string open { get; set; } 
    public string title { get; set; } 
    public string id { get; set; } 
    public string column { get; set; }   
    public string url { get; set; } 
    public object data { get; set; } 
    public string chartype { get; set; } 
} 

1）儀表板應只負責創建控件。所以所有json對服務器的調用都被刪除了。儀表板只負責創建小部件，而不是其他任何東西。

2）創建一個單獨的框架，將只負責內容附加到已創建的div [由儀表盤創建]

這裏是Jquery的代碼：

function CreateAndInitDashboard(jsonUrl, div) { 

    var startId = 100; 
    $.ajax({ 
     url: jsonUrl, 
     context: document.body, 
     success: function (data) { 

      var dashboard = div.dashboard({ 
       // layout class is used to make it possible to switch layouts 
       layoutClass: 'layout', 
       // feed for the widgets which are on the dashboard when opened 

       layouts: 
      [ 
      { title: "Layout1", 
       id: "layout1", 
       image: "/layouts/layout1.png", 
       html: '<div class="layout layout-a"><div class="column first column-first"></div></div>', 
       classname: 'layout-a' 
      }, 
      { title: "Layout2", 
       id: "layout2", 
       image: "/layouts/layout2.png", 
       html: '<div class="layout layout-aa"><div class="column first column-first"></div><div class="column second column-second"></div></div>', 
       classname: 'layout-aa' 
      }, 
      { title: "Layout3", 
       id: "layout3", 
       image: "layouts/layout3.png", 
       html: '<div class="layout layout-ba"><div class="column first column-first"></div><div class="column second column-second"></div></div>', 
       classname: 'layout-ba' 
      }, 
      { title: "Layout4", 
       id: "layout4", 
       image: "/layouts/layout4.png", 
       html: '<div class="layout layout-ab"><div class="column first column-first"></div><div class="column second column-second"></div></div>', 
       classname: 'layout-ab' 
      }, 
      { title: "Layout5", 
       id: "layout5", 
       image: "/layouts/layout5.png", 
       html: '<div class="layout layout-aaa"><div class="column first column-first"></div><div class="column second column-second"></div><div class="column third column-third"></div></div>', 
       classname: 'layout-aaa' 
      } 
      ] 

      }); // end dashboard call 

      dashboard.init(data.result); // passing the data to the dashboard !!! 

      $(data.result.data).each(function() { 

       var element = this.id; 
       if (this.chartype == 'PIE') { 
        $('#' + element + ' .widgetcontent').kendoChart({ 
         title: { text: "" }, 
         dataSource: this.data, 
         //chartArea: { background: "" }, 
         legend: { position: "top" }, 
         seriesDefaults: { type: "pie" }, 
         series: [{ 
          field: "ExposedLimit", 
          categoryField: "BusinessUnitName" 
         }], 
         tooltip: { 
          visible: true, 
          format: "{0:N0}" 
         } 
        }); 
       } 
       else if (this.chartype == 'BAR') { 
        $('#' + element + ' .widgetcontent').kendoChart({ 
         title: { text: "" }, 
         dataSource: this.data, 
         sort: { 
          field: "SubmitMonth", 
          dir: "asc" 
         }, 
         //chartArea: { background: "" }, 
         legend: { position: "top" }, 
         seriesDefaults: { type: "bar", labels: { visible: true, format: "{0}"} }, 
         tooltip: { visible: true, format: "{0:N0}" }, 
         series: [{ field: "Count", name: "CompanyA"}], 
         valueAxis: { 
          labels: { format: "{0}" } 
         }, 
         //seriesClick: onSeriesClick, 
         categoryAxis: { 
          field: "SubmitMonth", 
          labels: { format: "{0:MM}" } 
         } 
        }); 
       } 
      }); 


     } 
    }); 


} 

}); 

希望這有助於！

感謝， Anirban