自定义 JQuery UI Dashboard 插件

Question

我正在尝试为我的应用程序使用 jquery 仪表板插件。我已经看到了 http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html 中记录的插件。

这是一个很好的插件，但我的要求有点不同。我只想进行 1 次服务器调用并获取仪表板各个小部件所需的数据。我们将在仪表板中使用大量小部件 [基本上是图表]，因此我们认为我们可以通过调用一次服务器来获取每个小部件所需的配置和数据来提高性能。我提到的链接，加载后的小部件会单独调用以从服务器获取数据。

是否有任何这样的 Jquery 仪表板插件可以满足我的要求。任何指向此类的指针也将非常有帮助。

谢谢， 阿尼尔班

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 调用都被删除了。 Dashboard 只负责创建小部件，不负责其他任何事情。

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}" }
                        }
                    });
                }
            });


        }
    });


}

});

希望这会有所帮助！

谢谢， 阿尼尔班