自定义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)单独调用服务器以从服务器获取所有数据.服务器上的Model我这样做的方式是一次性返回图表所需的数据:我的模型看起来像这样:

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