简单仪表板

• 下载 HighchartsWebFinal-noexe.zip - 901.7 KB
• 下载 HighchartsWebFinal.zip - 1.1 MB
• 下载 简单仪表板（VS2010版本）

引言

仪表板是一个易于阅读的、单页的图形化展示，用于呈现组织内当前的状态。随着商业智能解决方案和Web应用程序作为交付平台的日益普及，对易于实现的、作为功能性仪表板的Web门户的需求也在不断增长。

一个典型的仪表板可以分为三个功能层：仪表板UI层、图表组件或数据表格表示以及数据检索层。UI层包括仪表板的整体外观和感觉。它决定了仪表板的结构，如页眉、页脚和菜单系统组件。它提供了一个面板子系统，可以容纳图表组件或组织数据的表格摘要。数据检索层并非仪表板独有，它是大多数非平凡Web应用程序的重要组成部分，本文将其视为范围之外。我们将重点关注实现UI层和一个可以针对各种仪表板类型进行复制的图表系统。

附件的解决方案包含两个项目。一个项目（HighchartsWebApp）演示了如何使用ASP.NET控件创建仪表板。这是一个极简的演示，适合那些想要一个主要基于C#的仪表板解决方案的人。第二个也是主要的项目（HighChartsJavaScript）使用JavaScript充分利用了我为这个演示选择的图表组件（Highcharts）的功能。我实现了这两个项目，以便为创建通用仪表板的目标提供替代路径。

UI层实现结合了JavaScript、CSS和HTML，这些是由TechGYO的人员设计的。我喜欢其设计的简洁性，并决定利用它来创建这个仪表板。我的目标是提供一个可以作为起点使用的示例。此项目面向初学者，在发布时未经压力测试/实际测试。如果时间允许，我可能会根据评论中的反馈提供未来的更新。

请下载附件文件（HighchartsWebFinal.zip），解压缩并打开Visual Studio 2012解决方案，以便在阅读本文档的其余部分时参考代码。

您可以通过在解决方案资源管理器中右键单击项目“HighChartsJavaScript”，然后选择“设置为启动项目”来激活JavaScript版本。此项目使用JavaScript实现了UI和图表组件。

您也可以通过在解决方案资源管理器中右键单击“HigchartsWebApp”项目，然后选择“设置为启动项目”来运行第二个项目。此项目不同之处在于，图表组件完全封装在ASP.NET控件中，并且所有图表的操纵都可以使用C#完成，而无需依赖JavaScript。做出选择后，按“F5”键即可激活演示。

我在HigchartsWebApp项目上投入的精力较少，因为我预计未来的开发将集中在开发JavaScript版本的图表代码上。此版本使用了一些C#代码来检索和填充数据，但图表控件完全在JavaScript中定义和执行。如果您想了解更多关于使用纯服务器端实现（如“HighchartsWebApp”项目）的信息，可以查看Highcharts.Net的网站，这是一个开源项目（http://highcharts.codeplex.com/）。

仪表板 - 操作

上面的截图显示了初始仪表板屏幕的注释视图。请注意，最后一个（绿色背景）部分故意留空。点击此部分会显示一个钻取/弹出报告（参见下一张截图）。

请注意，页眉已更改以显示钻取报告的标题。Metro UI主题的箭头出现，允许导航回主仪表板。

假设您在VS2012中打开了解决方案，以上信息应该足以指导大多数人成功运行项目，您甚至可以开始根据个人需求进行修改。对于那些想深入研究的人，让我们现在看看代码，以便更清楚地了解其操作。

如前所述，附件的解决方案包含两个项目，本文接下来的讨论将侧重于JavaScript版本（“HighChartsJavaScript”）。我们的目标是利用Highcharts这样的图表库来创建仪表板。此外，我们希望确定如何动态地将数据集成到图表中，而无需将其硬编码为JavaScript代码的一部分。在大多数情况下，在C#中检索数据会更容易。理想的情况是允许我们使用C#代码检索数据，然后将其无缝传递给JavaScript库，以便在我们的仪表板中渲染成图表。

我将本次审查分为三个部分，对应于上面讨论的三个功能层。第一部分涉及仪表板的设置。它检查了启用仪表板UI的外观、感觉和动画的HTML、CSS和JavaScript代码。第二部分将研究创建图表的JavaScript代码。第三部分将演示如何使用C#将示例应用程序数据与图表代码合并，以便我们能够将数据与Highcharts库集成。

第一部分：仪表板

如前所述，仪表板代码基于TechGYO的开发人员发布的免费模板。大部分代码包含在“index.html”文件中，相邻的屏幕截图显示了该文件的折叠视图，其中包含突出显示和标签，指示代码中的各个功能区域。请注意，代码已在Visual Studio中折叠，以提供此鸟瞰图。

如果您检查绘制每个仪表板面板的代码（第112-125行），您会发现它包含一个包含空div的超链接，除此之外没有太多内容。

这是因为面板填充工作全部在我们将要在“第二部分：绘制图表”中讨论的JavaScript代码块中完成。超链接本身大多是惰性的，仅在面板6（绿色面板）的情况下用于演示钻取/弹出功能。

第二部分：绘制图表

如前一节所述，每个仪表板面板最初是空的，并由单独的JavaScript代码块填充。下面的代码片段显示了一个这样的块以及渲染的图表。

此脚本定义了一个JavaScript对象。第214行确保该对象（Linechart）放置在Panel 1中。第245-257行定义了图表上显示的数据系列。请注意，Highchart对象使用JSON定义。如果您不熟悉JSON，应该查找网络上提供的许多教程之一。一个好的起点参考是W3Schools的教程：https://w3schools.org.cn/json/。

第三部分：将应用程序数据与图表代码合并

您可能已经意识到，到目前为止的示例的实用性有限，因为数据已硬编码到页面中。大多数用例涉及从数据源读取数据并动态填充图表。本节旨在帮助您开始走上这条道路。为了简洁和重点，我不打算涵盖如何从数据源中提取数据。我假设您能够编写代码来读取您的应用程序数据。就个人而言，我包含了一些我用于我的应用程序的注释代码。代码中需要注意的是，我们正在使用一些变量（类级别的数组）来存储将作为图表输入的那些值。

然后，您可以使用数据绑定表达式将应用程序数据绑定到JavaScript代码中。

这样就完成了这个简短的仪表板开发介绍。您可以修改JavaScript代码以使用任何其他基于JavaScript的图表库。您不仅限于图表，每个仪表板面板的内容几乎可以是网页中任何有效的内容。该模板的简单性有望确保学习曲线短且平缓。随时抛出关于您希望如何进一步开发此仪表板的想法，也许我们可以在将来的更新中探讨它们。

依赖项

1. Visual Studio 2012 （http://www.microsoft.com/visualstudio/eng/downloads）
2. Highcharts Charting Library （http://www.highcharts.com/products/highcharts）
3. Highcharts.Net （http://highcharts.codeplex.com/）– 与Highcharts Charting Library 无关
4. Metro UI Template by TechGYO.com （http://techgyo.com/index.php/free-metro-ui-html-template-by-techgyo/）

仪表板实现参考网站

1. The Geckoboard Blog （https://demo.geckoboard.com/dashboard/B6782E562794C2F2/）
2. jSlate （https://github.com/rasmusbergpalm/jslate/graphs）
3. D3 （https://github.com/mbostock/d3/wiki/Gallery）
4. Vaadin Dashboard （https://vaadin.com/demo）

历史

• 2013年7月4日 - 初稿
• 2014年10月6日 - 添加了VS2010版本