自定义 JQuery UI 仪表板插件

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

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


        }
    });


}

});

希望这有帮助！

谢谢，
阿尼班