「实战应用」如何用图表控件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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

适用于 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…

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作为网页动态效果和交互的主力军,其在视频处理领域能力逐渐被挖掘和重视,尤其是视频帧截图技术的应…

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

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

09.爬虫---正则解析爬取数据

09.正则解析爬取数据 1.目标网站2.具体实现3.正则表达式分析4.完整代码并存入表格 1.目标网站 直达目标网站 https://movie.douban.com/chart 2.具体实现 我们来拿取一下上面网页的代码如下: from urllib import requesturl https://movie.douban.com/chart headers {Us…

解决 DBeaver 查询时不刷新数据,需要重新连接才会刷新,有缓存一样

DBeaver 查询时总是第一次有数据,再次执行查询数据不会刷新,像是有缓存一样,需要重新连接再查询才会刷新,知道肯定是哪里设置的不对,但是一直没找到,实在是重连太烦了,多次尝试终于找到了设置。…

【数据结构】从前序与中序遍历,或中序与后序遍历序列,构造二叉树

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持! 首先,根据先序遍历可以确定根节点E,再在中序遍历中通过E确定左树和右数 ; 设立inBegin和inEnd,通过这两个参数的游走,来进行子树的创建&a…

ApiJson简单使用

前言 最近在正式迭代中插入了一个大屏演示项目,因为后端开发人员任务都安排满了,而演示项目逻辑比较简单,大多是直接查表就能搞定,所以只能想办法让前端直接和数据库交互,增加开发速度。在找工具时发现了ApiJson。尝试…

详解redis单线程设计思路

写在文章开头 我们都知道redis是一个基于单线程实现高效网络IO和键值对读写操作的内存数据库,本文将从源码的角度剖析一下redis高效的单线程设计。 Hi,我是 sharkChili ,是个不断在硬核技术上作死的 java coder ,是 CSDN的博客专家 ,也是开源项目 Java Guide 的维护者之一…

一键生成迷宫-Word插件-大珩助手新功能

Word大珩助手是一款功能丰富的Office Word插件,旨在提高用户在处理文档时的效率。它具有多种实用的功能,能够帮助用户轻松修改、优化和管理Word文件,从而打造出专业而精美的文档。 【新功能】迷宫生成器 1、可自定义迷宫大小; …

topK 问题

topK 问题 topK二、实验内容三、数据结构设计四、算法设计五、运行结果六、程序源码 topK (1)实验题目 topK 问题 (2)问题描述 从大批量数据序列中寻找最大的前 k 个数据,比如从 10 万个数据中,寻找最大的…

论文阅读《SELECTIVE DOMAIN-INVARIANT FEATURE FOR GENERALIZABLE DEEPFAKEDETECTION》

作者:Yingxin Lai、 Guoqing Yang1、Yifan He2、Zhiming Luo、Shaozi Li 期刊:ICASSP-2024 目的:解决泛化性的问题,提出了3个模块 论文整体的架构图:(挑选域特征不变,减少对图像内容或者风格…

Java面试八股之怎么降低锁竞争

怎么降低锁竞争 减少锁的持有时间: 尽量缩短线程持有锁的时间,只在必要时才获取锁,一旦操作完成立即释放锁。可以通过将同步代码块的范围缩小到最小必要程度来实现,避免在锁保护的代码块中执行耗时操作或等待操作,比如…

HTML+CSS+JS 选项卡导航栏

效果演示 实现了一个导航栏切换内容的效果。页面上方有一个导航栏,每个导航项都有一个圆形背景,点击导航项时,圆形背景会放大并显示对应的内容。每个内容区域都包含一个大号字母,数字会在内容区域显示时淡入。点击其他导航项时,当前内容区域会淡出并隐藏,同时新的内容区域…