彩票走势图

「实战应用」如何用图表控件LightningChart JS创建SQL仪表板应用(一)

翻译|使用教程|编辑:龚雪|2024-05-31 10:45:00.407|阅读 14 次

概述:本文将为大家介绍如何集成LightningChart JS组件来创建一个响应式SQL仪表板应用程序。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

LightningChart JS是Web上性能特高的图表库,具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画,常用于贸易,工程,航空航天,医药和其他领域的应用。

SQL仪表板应用程序

在本文中,我们将看到一个使用几种开发工具的向项目,将用SQL Server中生成的数据创建一个SQL仪表板,并使用Angular进行web开发。在这个项目中,还将使用Bootstrap创建用户界面。

您可以下载此项目,其中包括数据库备份。值得一提的是,用户必须拥有LightningChart JS试用许可证才能查看图表,该许可证是免费的。可直接戳这里获取免费试用授权>>

此外要知道我们将使用SQL server生成数据,但数据传输将在Angular项目中手动进行,有必要使用API和开发代码通过web请求来使用数据。

在图形界面方面,我们将使用Bootstrap来生成HTML模板,这将使得更容易创建一个响应式网站,意味着您可以在多个设备上查看此项目。

项目概述

下面是我们将用于创建SQL仪表板的图表,请注意本文中不会逐一讨论它们的开发代码,将只关注这个项目的实现。与任何仪表板一样,使用摘要卡来显示相关数据以获得快速见解总是很有用的,因此我们会添加一些卡片来汇总数据。

1. 甜甜圈图表
图表控件LightningChart JS使用教程
2. 横条形图
图表控件LightningChart JS使用教程
3. 阶梯级数图
图表控件LightningChart JS使用教程
4. 竖条形图
图表控件LightningChart JS使用教程

与任何仪表板一样,提供信息卡来显示相关数据以进行快速分析总是很有用的,因此我们将添加一些卡片,作为数据库中的数据摘要。

关于数据集

我们的仪表板将显示来自科技文章的营销信息及其有关流量、观点、作者和有机排名的数据。

图表控件LightningChart JS使用教程

技术要求
图表控件LightningChart JS使用教程
  1. SQL Server Management Studio v18或更高版本。
  2. 本地主机的MSSQL服务器实例。
  3. Node JS 16或更高版本(与Angular版本兼容)
  4. Angular v15或更高版本。
  5. Lightning Chart JS授权(免费试用或购买)
  6. Visual Studio代码
SQL Server + 数据库

您可以在项目文件夹内的DB文件夹中找到SQL Server恢复文件,该文件包含将用于生成仪表板有效负载的数据表。该文件还包含一个存储过程,其中包含有效负载所需的查询,这些表的结构如下:

图表控件LightningChart JS使用教程

Article table将包含Dashboard中可用的条目名称:

图表控件LightningChart JS使用教程

Author table将包含作者的名字:

图表控件LightningChart JS使用教程

Category table将作为一个目录,根据所解释的主题类型对文章进行分组:

图表控件LightningChart JS使用教程

Publishing table显示了文章、作者、类别和每个出版日期之间的关系。

图表控件LightningChart JS使用教程

我们管理主表的实体关系,PublishingDetails表包含每个出版物的统计数据,例如每个出版物的排名、印象、视图和阅读持续时间。

图表控件LightningChart JS使用教程

数据是随机生成的,我们总共只涵盖了10篇文章,您可以根据需要调整本教程示例。表包含外键,因此在修改它们之前必须删除所有关系。

有效负荷

有效负荷是通过作为HTTP响应发送的消息传输的一组数据,API帮助通过HTTP响应获取这些数据,以便在项目中作为JSON字符串读取和操作这些数据。

在这个项目中,我们将没有API来自动化这个过程,但能够生成一个JSON字符串,作为仪表板的响应和数据源。在可编程性-存储过程文件夹中,我们会发现过程getDashboardJSONData:

图表控件LightningChart JS使用教程

这个过程将返回一个JSON字符串,我们需要将它粘贴到Angular项目中的一个文件中。

图表控件LightningChart JS使用教程

通过点击结果,您将能够访问完整的字符串:

图表控件LightningChart JS使用教程

您只需要复制粘贴它,在这个过程中,我们将找到查询块,这些查询块将具有适合在Angular项目中读取的格式,这些查询将在最终的JSON对象中生成元素:

图表控件LightningChart JS使用教程

在上面的例子中,变量TOTAL_NUMBER_ARTICLES_CATEGORY将是一个嵌套对象,它将包含按类别计数的文章:

图表控件LightningChart JS使用教程

这个分组将作为甜甜圈图的数据源,JSON路径允许我们将查询结果格式化为JSON对象。

篇幅有限,更多精彩内容我们下期再见......


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP