自定义 JQuery UI 仪表板插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9316367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customized JQuery UI Dashboard plugin
提问by Anirban
I am trying to use a jquery dashboard plugin for my application. I have seen the plugin as documented in http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html.
我正在尝试为我的应用程序使用 jquery 仪表板插件。我已经看到了http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html 中记录的插件。
This is a good plugin but my requirement is a bit different. I want to make only 1 single server call and get the data required for the individual widgets of the dashboard. We will be using lot of widgets [charts basically] inside the dashboard so we feel we can improve the performance by getting the configuration and the data required for each widget by making one server call. The link I have mentioned, the widgets after they are loaded make individual call to get their data from the server.
这是一个很好的插件，但我的要求有点不同。我只想进行 1 个单个服务器调用并获取仪表板的各个小部件所需的数据。我们将在仪表板内使用大量小部件 [基本上是图表]，因此我们觉得我们可以通过进行一次服务器调用来获取每个小部件所需的配置和数据来提高性能。我提到的链接，加载后的小部件会单独调用以从服务器获取数据。
Is there any such Jquery dashboard plugin that will suffice my requirement. Any pointers to such will also be very helpful.
有没有这样的 Jquery 仪表板插件可以满足我的要求。任何指向此类的指针也将非常有帮助。
Thanks, Anirban
谢谢，阿尼尔班
回答by Anirban
So here is the solution I did !!
所以这是我做的解决方案！
I used the same plugin as in http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html.
我使用了与http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html 中相同的插件。
The approach i took:
我采取的方法：
1) Made a separate call to the server to get all data from the server. The Model on the server I did in such a way that it returns the data required for the charts at one go : My model looked something like this :
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)The dashboard should only be responsible to create the widgets. So all json calls to the server were removed. Dashboard will only be responsible for just creating the widgets and nothing else.
1）仪表板应该只负责创建小部件。所以所有对服务器的 json 调用都被删除了。Dashboard 只负责创建小部件而不负责其他任何事情。
2)Created a separate framework which will be responsible only for attaching the contents to the already created div [created by the dashboard]
2）创建了一个单独的框架，它只负责将内容附加到已经创建的 div [由仪表板创建]
Here is the Jquery code :
这是 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}" }
}
});
}
});
}
});
}
});
Hope this helps !
希望这可以帮助 ！
Thanks, Anirban
谢谢，阿尼尔班
