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

news2024/11/22 18:32:43

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.coloradmin.cn/o/1794683.html

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

相关文章

Polar Web【简单】php very nice

Polar Web【简单】php very nice Contents Polar Web【简单】php very nice思路EXP运行&总结 思路 打开网页源代码,由下图的代码,可见本题涉及到反序列化以及变量覆盖。 因此考虑传递GET参数a来构造序列字符串。 由上图中的代码,在Exampl…

8.7k Star!Khoj:你的AI第二大脑、开源RAG Cop​​ilot、平替 MS Copilot与ChatGPT

原文链接:(更好排版、视频播放、社群交流、最新AI开源项目、AI工具分享都在这个公众号!) 8.7k Star!Khoj:你的AI第二大脑、开源RAG Cop​​ilot、平替 MS Copilot与ChatGPT 🌟你的AI第二大脑。…

Splatter Image: Ultra-Fast Single-View 3D Reconstruction

Splatter Image: Ultra-Fast Single-View 3D Reconstruction 飞溅图像:超快速单视图3D重建 Stanislaw Szymanowicz  Christian Rupprecht  Andrea Vedaldi 克里斯蒂安鲁普雷希特安德烈韦达尔迪 Visual Geometry Group — University of Oxford {stan,chrisr,vedal…

优卡集团冲刺港股上市:90后创始团队孵化,IPO前突击大额分红

现年26岁的鲁圳,正在带领其6年以来的创业成果冲击资本市场。 近日,金融居间机构服务商优卡集团(Yoc Group)向港交所递交上市申请,民银资本为其独家保荐人。透过招股书可知,优卡集团成立于2018年&#xff0…

自动化测试-Selenium(一),简介

自动化测试-Selenium 1. 什么是自动化测试 1.1 自动化测试介绍 自动化测试是一种通过自动化工具执行测试用例来验证软件功能和性能的过程。与手动测试不同,自动化测试使用脚本和软件来自动执行测试步骤,记录结果,并比较预期输出和实际输出…

Gitlab---添加描述模版

0 Preface/Foreword Gitlab是代码托管平台,DevOps。因其免费,被广泛使用。GitLab不但可以管理代码,也可以管理issue,创建milestone等等。针对issue管理,支持描述模版功能,即对于新建的issue,可…

山东大学软件学院项目实训-创新实训-基于大模型的旅游平台(二十八)- 微服务(8)

目录 11.4 SpringAMQP 11.4.2 Work Queue工作队列 11.4.3 发布订阅模型 11.4.4 FanoutExchange(广播交换机) 11.4.5 DirectExchange(路由模式交换机) 11.4.6 TopicExchange 11.5 消息转换器 11.4 SpringAMQP 父工程引入AMQP依赖 <!--AMQP依赖&#xff0c;包含RabbitMQ…

redis哨兵练习

1、6台服务器&#xff0c;3台作一个主从&#xff0c;3台作哨兵 服务器IP主redis192.168.99.133从redis1192.168.99.139从redis2192.168.99.141哨兵1192.168.99.144哨兵2192.168.99.156哨兵3192.168.99.160 6台服务器安装好redis&#xff0c;全部执行&#xff1a; #把redis的…

C语言杂谈:函数栈帧,函数调用时到底发生了什么

我们都知道在调用函数时&#xff0c;要为函数在栈上开辟空间&#xff0c;函数后续内容都会在栈帧空间中保存&#xff0c;如非静态局部变量&#xff0c;返回值等。这段空间就叫栈帧。 当函数调用&#xff0c;就会开辟栈帧空间&#xff0c;函数返回时&#xff0c;栈帧空间就会被释…

读《淘宝技术这10年》:从进化中感受技术的美与挑战

本文作者:小米,一个热爱技术分享的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! 大家好,我是小米,一个29岁的程序员,喜欢分享技术干货。今天,我想和大家聊一聊我最近读的一本书——《淘宝技术这10年》。这本书让我深刻领悟…

解决IDEA拉取或提交代码时SSL certificate problem: unable to get local issuer certificate问题

在使用IDEA拉取或提交GitHub上的代码时提示如下错误&#xff1a; 解决方法如下&#xff0c;依次执行命令&#xff1a; 在项目根目录下&#xff0c;打开Git Bash 1、echo | openssl s_client -servername github.com -connect github.com:443 | sed -ne /-BEGIN CERTIFICATE-/…

23 - 每位教师所教授的科目种类的数量(高频 SQL 50 题基础版)

23 - 每位教师所教授的科目种类的数量 考点&#xff1a; 排序和分组 selectteacher_id,count(distinct subject_id) cnt fromTeacher group byteacher_id;

SL3160 替换PN6008 耐压150V 降5V输出降压恒压芯片 脚位一样

在电子工程领域&#xff0c;芯片替换是一项常见且至关重要的任务。今天&#xff0c;我们将详细探讨SL3160芯片如何替换PN6008芯片&#xff0c;重点关注两者在耐压150V和降5V输出降压恒压方面的性能对比&#xff0c;以及它们脚位一致性的优势。 我们来了解一下SL3160和PN6008这两…

AE/PR插件中文汉化-StyleX V1.0.1动漫卡通绘画半色调漫画风格化特效

插件StyleX是一款采用人工智能AI技术的高级视频风格化工具&#xff0c;它不仅可以将素材转换为高质量的卡通片&#xff0c;还可以生成给定图像或视频风格的任意风格化视频。使用此工具&#xff0c;用户可以轻松创建创意风格化效果&#xff0c;例如卡通、绘画、绘画、半色调等等…

【大数据】计算引擎:Spark核心概念

目录 前言 1.什么是Spark 2.核心概念 2.1.Spark如何拉高计算性能 2.2.RDD 2.3.Stage 3.运行流程 前言 本文是作者大数据系列中的一文&#xff0c;专栏地址&#xff1a; https://blog.csdn.net/joker_zjn/category_12631789.html?spm1001.2014.3001.5482 该系列会成体…

翻译《The Old New Thing》- What’s with this MSH_MOUSEWHEEL message?

Whats with this MSH_MOUSEWHEEL message? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20080806-00/?p21353 Raymond Chen 2008年06月06日 MSH_MOUSEWHEEL 消息是怎么回事&#xff1f; 硬件团队正在研发一种鼠标滚轮设备&#xff0c;并…

LlamaIndex 一 简单文档查询

前言 在学习LangChain的时候&#xff0c;我接触到了LlamaIndex。它犹如我在开发vue时用到的axios&#xff0c;主要负责数据打理。别问我为什么打这个比方&#xff0c;前端老狗&#xff0c;重走AI路&#xff0c;闭关一年能否学的妥当&#xff1f; LlamaIndex 是一个用于 LLM 应…

【Python】教你彻底认识Python中的Web开发

​​​​ 文章目录 一、Web开发的基本概念1. Web服务器2. 客户端-服务器模型3. HTTP协议4. 前端与后端 二、常用的Web开发框架1. Django1.1 安装Django1.2 创建Django项目1.3 定义模型1.4 定义视图1.5 定义URL路由1.6 模板 2. Flask2.1 安装Flask2.2 创建Flask应用2.3 模板2.4…

Day 41 NGINX详解

Nginx详解 一、HTTP协议 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写,是用于从万维网&#xff08;WWW:World Wide Web &#xff09;服务器传输超文本到本地浏览器的传送协议。 1、HTTP 工作原理 HTTP协议通信流程 WEB Server&…

队列的实现及其应用

队列的概念 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作&#xff0c;具有先进先出的效果。入数据的一段称为队尾&#xff0c;出数据的一段称为队头。队列的应用是&#xff1a;1.维持公平性&#xff08;抽号&#xff09;、2.广度优先遍历…