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

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

立即申请LightningChart JS新版下载

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使用教程

戳这里直接下载SQL仪表板模板>>

技术要求

图表控件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对象。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/22085.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入了解JVM命令:优化Java应用的利器

目录 前言JVM架构概述常用JVM命令 javajavacjpsjstackjmapjstatjinfojcmd 命令详解及使用场景 java命令javac命令jps命令jstack命令jmap命令jstat命令jinfo命令jcmd命令 高级JVM调优 GC调优内存调优性能监控和分析 总结 前言 JVM不仅仅是一个执行Java字节码的运行时环境&…

10-探索 Intersection Observer API:高效管理元素可见性

探索 Intersection Observer API:高效管理元素可见性 笔记分享 在前端开发中,处理元素的可见性是一个常见的需求,尤其是在实现懒加载、无限滚动或检测广告曝光度等场景中。传统的方法通常依赖于 scroll 事件和 getBoundingClientRect 方法&a…

【ES】docker安装ES7.14.0+es-head

# 拉取镜像 docker pull elasticsearch:7.14.0 # 运行 --- # 拷贝数据用于挂载 docker cp -a es:/usr/share/elasticsearch/config/. /volume/es/config # 启动容器 docker run -p 9200:9200 -p 9300:9300 --privilegedtrue --name es -e "discovery.typesingle-node&quo…

【递归、搜索与回溯】递归、搜索与回溯准备+递归主题

递归、搜索与回溯准备递归主题 1.递归2.搜索3.回溯与剪枝4.汉诺塔问题5.合并两个有序链表6.反转链表7.两两交换链表中的节点8.Pow(x, n)-快速幂(medium) 点赞👍👍收藏🌟🌟关注💖💖 你…

Docker基础篇之本地镜像发布到阿里云

文章目录 1. 本地镜像发布到阿里云的流程2. 阿里云开发平台3. 将自己的本地镜像推送到阿里云 1. 本地镜像发布到阿里云的流程 阿里云ECS Docker生态如下图所示: 2. 阿里云开发平台 在控制台找到容器和镜像服务: 然后创建一个个人实例: 下面…

深圳垣象科技golang期望19K一面挂

垣象科技是一个初创公司,我们看好制造业数字化这个大方向,希望搭建一个云平台,通过创新的产品和服务,提高电子及高科技行业产品创新的能力和研发的效率 一面(挂) 总体来说项目答得不好,h5 拖拽…

Spring为什么不支持static字段注入

Spring不支持直接依赖注入到静态变量中。在Spring框架中,依赖注入是一个核心概念,它允许开发者将对象间的依赖关系定义转移到容器中,由容器负责管理这些依赖关系。然而,当涉及到静态变量时,情况就变得复杂了。 首先从…

适用于 Windows 10 的 5 个最佳数据恢复工具

很多时候,由于存储设备故障或意外删除数据,有时您需要在Windows 10操作系统中恢复数据。大多数人不熟悉在Windows 10下恢复数据的过程。由于这个原因,他们经常认为这是不可能的。事实是,有很多工具可用于Windows 10数据恢复。今天…

Clickhouse 的分布式架构说明——Clickhouse 架构篇(五)

文章目录 前言架构特点及对比ClickHouse分布式架构的优点ClickHouse分布式架构的缺点ClickHouse与Hadoop的分布式架构对比 基本概念集群副本分片 ClickHouse的复制表引擎创建复制表复制表复制复制表查询 ClickHouse分布式表引擎分布式表查询原理分布式表的数据写入方案分布式表…

Plotting World Map in Python

1. 方法一 pygal Plotting World Map Using Pygal in Python import pygal # create a world map worldmap pygal.maps.world.SupranationalWorld() # set the title of map worldmap.title Continents# adding the continents worldmap.add(Africa, [(africa)]) worl…

加快Qt的编译速度有多种方法,以下是一些建议:

启用并行编译:Qt Creator默认采用串行编译方式,即一次只编译一个文件。在处理大量文件时,这种方式的效率较低。通过启用并行编译,可以同时编译多个文件,从而显著提高编译速度。 减少头文件依赖:头文件的依…

spring boot中redis操作Hash踩坑

目录 问题 原因 解决方案 问题 如下代码是获取短信验证码功能,会先检查下前面五分钟内发没发过验证码,也就是有没有手机号对应缓存key,有的话刷新过期时间,没有就缓存一下设置过期时间为5分钟。 但是经过测试在第一次发送时缓…

Java 新特性在实际项目中的应用与优势

Java的新特性在实际项目中的应用和优势主要体现在以下几个方面: Lambda表达式:Lambda表达式简化了代码编写,可以更方便地使用函数式编程的思想。在实际项目中,可以通过Lambda表达式简化集合的遍历、排序等操作,提高代码…

PyTorch深度学习实战(44)——基于 DETR 实现目标检测

PyTorch深度学习实战(44)——基于 DETR 实现目标检测 0. 前言1. Transformer1.1 Transformer 基础1.2 Transformer 架构 2. DETR2.1 DETR 架构2.2 实现 DETR 模型 3. 基于 DETR 实现目标检测3.1 数据加载与模型构建3.2 模型训练与测试 小结系列链接 0. 前…

自动驾驶---Control之LQR控制

1 前言 在前面的系列博客文章中为读者阐述了很多规划相关的知识(可参考下面专栏),本篇博客带领读者朋友们了解控制相关的知识,后续仍会撰写规控相关文档。 在控制理论的发展过程中,人们逐渐认识到对于线性动态系统的控…

javascript的AMD模式

AMD(Asynchronous Module Definition,异步模块定义)是一种JavaScript模块化开发的规范,它主要应用于浏览器环境,用于解决浏览器端的模块化和异步加载问题。AMD规范由James Burke等人在开发Dojo Toolkit的过程中提出&am…

VBA实战(Excel)(5):介绍一种排列组合算法

1. 需求场景 有多个条件,条件个数不定,每个条件有若干种情况,情况个数不定,输出所有条件可能的情况的排列组合。 2.举例 假设第一次有5个情况要填,第一个条件20种情况,第二个5种,第三个40种&…

视频封面:如何用前端实现视频帧截图

在这样一个图像化极其重要的时代,从视频中提取精彩瞬间,即视频帧截图的技术,已成为前端开发中的一个亮点。JavaScript作为网页动态效果和交互的主力军,其在视频处理领域能力逐渐被挖掘和重视,尤其是视频帧截图技术的应…

一键实现文件重命名:巧妙运用随机大写字母命名,复制新文件名,轻松管理文件库!

我们的电脑里总是堆积着各种各样的文件。无论是工作文档、生活照片还是学习资料,这些文件都承载着我们的回忆和辛勤努力。然而,随着时间的推移,文件名的混乱和重复逐渐成为我们管理文件的难题。为了解决这一困扰,我们推出了一款创…

TypeScript 中的装饰器

1. 装饰器的概念 装饰器是一种特殊的语法,它可以附加到类、方法、属性或参数上,并在运行时动态地修改它们的行为。装饰器通常用于添加元数据、实现切面编程、实现依赖注入等功能。在 TypeScript 中,装饰器是一种实验性的特性,需要…