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

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

在上文中(点击这里回顾>>),我们主要介绍了SQL仪表板应用程序、项目概述、技术要求等内容,本文将继续介绍SQL Server无API自动化、Angular开发、图表开发等内容,持续关注我们哦~

立即申请LightningChart JS新版下载

SQL Server No-API自动化

如果您有使用SQL Server的经验,理解表的实体关系是没有问题的。尽管这些查询看起来很难理解,但它们将作为您进行调整的基础。

如何在没有API的情况下自动化SQL Server流程?

  1. 使用CMD Shell命令将JSON文件保存到与Angular项目共享的路径中。
  2. 创建在特定日期时间执行存储过程的SQL Server JOB。

恢复备份时,必须使用恢复工具:

图表控件LightningChart JS使用教程

然后你必须选择[Device], [add]选项,找到.bak文件:

图表控件LightningChart JS使用教程

最后,确认并运行备份。

Angular开发

使用Visual Studio Code,您将需要打开SQL Dashboard项目,一旦打开,将看到以下结构:

图表控件LightningChart JS使用教程

在安装项目依赖项之前,node_modules文件夹将不可用。为此您必须打开一个新的终端并运行npm install命令。您需要在电脑上安装Angular才能执行它的命令,可以通过执行下面的命令来实现:

npm install -g @angular/cli.

全局属性(-g)会全局安装Angular,并允许您在本地计算机上使用包中的代码作为一组工具。一旦项目配置好了,就可以继续代码审查了。

App.component

组件是Angular应用中最基本的UI构建块,Angular组件是指令的一个子集,总是与模板相关联,App组件是Angular在从头生成项目时创建的。

我们将使用这个组件作为父组件,它将包含仪表板的内容。HTML文件将包含导航栏和主体,其他模板将在其上呈现。

<header class="navbar navbar-dark sticky-top shadow" style="background-color: #3F4858;">
<div class="container-fluid">
<a class="navbar-brand" href="#">LightningChart - Article Ranking Analysis</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

值得一提的是,这些类属于Bootstrap v5,类的结构和名称必须保持相同,来利用Bootstrap的优点,包括响应性、外观和效果。在其声明中,模块文件将包含项目中的其余组件:

@NgModule({
declarations: [
AppComponent,
RankingComponent,
DonutChartComponent,
StepSeriesChartComponent,
HorizontalBarChartComponent,
VerticalBarChartComponent,
],
路由

路由器通过将浏览器URL解释为改变视图的指令来实现导航,条形图中的每个菜单项都必须添加到路由器中:

const appRoutes:Routes=[
{ path:'rank', component:RankingComponent},
];

图表控件LightningChart JS使用教程

RankingComponent是我们的排名视图的组件,它将包含仪表板图表。

<li class="nav-item">
<a class="nav-link" href="/ranking">Ranking</a>
</li>
图表开发

在Charts文件夹中,我们将找到4-Dashboard图表的组件:

图表控件LightningChart JS使用教程

组件具有相同的结构:CSS、HTML、Typescript,在每个CSS文件中,我们将看到为HTML div元素指定了一个以像素为单位的高度:

div { height: 350px;}

由于图表组件将在其HTML结构中只使用一个DIV(将包含图表的DIV),因此将为图表分配一个最大高度,以防止图表过大或过小。在HTML文件中,我们将创建包含图表的div:

<div [id]="100"></div>

我们将为它分配一个ID,以帮助LightningChart JS查找并分配将显示图表的HTML对象。

Component.ts

这个文件将包含创建图表的逻辑,首先我们将看到帮助构建图表的模块,以及实现图表所需的Angular模块:

import { Component, Input, AfterViewInit, OnChanges, OnDestroy } from '@angular/core';
import { lightningChart, ChartXY, Point, PieChartTypes, UIElementBuilders, LegendBoxBuilders, Themes, SliceLabelFormatters, UIOrigins, UIDraggingModes, emptyFill, emptyLine, AxisTickStrategies, SolidFill, SolidLine, Animator, transparentFill, Chart, PieChart, ColorRGBA } from '@arction/lcjs';
import donutdata from "../../../assets/data/data.json";

有一个JSON文件导入,该文件将包含由SQL Server存储过程(getDashboardJSONData)生成的JSON。

let TOTAL_NUMBER_ARTICLES_CATEGORY = donutdata.TOTAL_NUMBER_ARTICLES_CATEGORY

JSON对象将被分配给一个变量,该变量稍后将用于映射和格式化数据。授权JSON对象将包含授权许可的字符串,并将分配给LightningChart JS库的授权许可属性:

const lc = lightningchart({license: licenseJson.license})
this.chart = lc
.BarChart({
type. BarChartTypes.Horizontal,
theme: Themes.lightningNature,
container: '200',
})

您可以获得一个免费的使用LightningChart JS授权(可联系“在线客服”获取),有了这个授权,您将能够访问完整的库并继续实施这个项目。要更新license,必须进入文件license,并替换它的值:

图表控件LightningChart JS使用教程

{"license":"xxx-xxxx"}

容器属性必须具有与HTML文件中创建的DIV元素相同的组件ID,包含JSON文件的变量将用于为图表提供所需的格式:

for (let i = 0; i < TOTAL_NUMBER_ARTICLES_CATEGORY.length; i++) {
totalVisitor += TOTAL_NUMBER_ARTICLES_CATEGORY[i].ARTICLES_COUNT;
processedData.push({ name: `${TOTAL_NUMBER_ARTICLES_CATEGORY[i].CATEGORY}`, value: TOTAL_NUMBER_ARTICLES_CATEGORY[i].ARTICLES_COUNT })
}

JSON映射和格式化代码将根据图表而更改,视觉属性也会有所不同,但是每个属性都可以在官方的LightningChart JS文档中查阅,所有图表组件的导入模块和授权设置将保持不变。

@Component({
selector: 'app-donut-chart',
templateUrl: './donut-chart.component.html',
styleUrls: ['./donut-chart.component.css']
})

上面的代码显示了三个属性,每个属性引用一个HTML模板和一个样式文件。

  • selector属性告诉Angular,只要在HTML模板中找到相应的标签,就创建一个该组件的实例。
  • 选择器值很重要,因为我们将通过它将每个图表组件加载到Ranking组件中。

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

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

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

相关文章

OpenCore 引导完美升级

备份原有 OC (做好回滚的准备下载新版 OpenCore https://github.com/acidanthera/OpenCorePkg/releases将 1, 3, 4 里面的文件使用新版进行替换 4 里面的文件严格来说并不需要, 只是留着方便使用不追求完美到这就可以收工了将 OC 复制到 U 盘 EFI U 盘格式化可以使用: diskutil…

微服务开发与实战Day09 - Elasticsearch

一、DSL查询 Elasticsearch提供了DSL&#xff08;Domain Specific Language&#xff09;查询&#xff0c;就是以JSON格式来定义查询条件。类似这样&#xff1a; DSL查询可以分为两大类&#xff1a; 叶子查询&#xff08;Leaf query clauses&#xff09;&#xff1a;一般是在特…

Fortran 编程整理

Fortran编程语法整理 01 Fortran 中的程序单元1-1 submodule&#xff08;子模块&#xff09; 02 子程序与函数2-1 概述2-2 函数与子程序特性&#xff08;1&#xff09;为函数结果指定不同名称 03 stop命令后跟说明04 do concurrent4-1 do concurrent 的使用 05 纯过程&#xff…

Docker Jenkins(改错版本)

Devops:它强调开发(Development)和运维(Operations)团队之间的协作.实现更快,更可靠的软件交付部署. JenKins是一个开源的自动化服务器,广泛用于构建,测试和部署软件项目.它是持续集成(CI)和持续交付/部署(CD)的工具.JenKins是实现DevOps实践的重要工具. 前端项目部署一般流程:…

Matlab|基于V图的配电网电动汽车充电站选址定容-可视化

1主要内容 基于粒子群算法的电动汽车充电站和光伏最优选址和定容 关键词&#xff1a;选址定容 电动汽车 充电站位置 仿真平台&#xff1a;MATLAB 主要内容&#xff1a;代码主要做的是一个电动汽车充电站和分布式光伏的选址定容问题&#xff0c;提出了能够计及地理因素和服…

ubantu 计算一个文件夹内的文件数量命令

ubantu 计算一个文件夹内的文件数量命令 在Ubuntu中&#xff0c;你可以使用find命令来计算一个文件夹内的文件数量。以下是一个基本的命令示例&#xff1a; find /path/to/directory -type f | wc -l这里的/path/to/directory是你想要计算文件数量的文件夹的路径。find命令会…

蓝队-溯源技巧

溯源技巧 大致思想 通常情况下&#xff0c;接到溯源任务时&#xff0c;获得的信息如下 攻击时间 攻击 IP 预警平台 攻击类型 恶意文件 受攻击域名/IP其中攻击 IP、攻击类型、恶意文件、攻击详情是溯源入手的点。 通过攻击类型分析攻击详情的请求包&#xff0c;看有没有攻击者…

Web前端网页源代码:深入剖析与实用技巧

Web前端网页源代码&#xff1a;深入剖析与实用技巧 在Web开发的浩瀚领域中&#xff0c;前端网页源代码扮演着至关重要的角色。它不仅是网页的骨架&#xff0c;更是实现各种交互和视觉效果的基石。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;对Web前端网页源代…

C# OpenCvSharp 矩阵计算-determinant、trace、eigen、calcCovarMatrix、solve

🚀 在C#中使用OpenCvSharp库进行矩阵操作和图像处理 在C#中使用OpenCvSharp库,可以实现各种矩阵操作和图像处理功能。以下是对所列函数的详细解释和示例,包括运算过程和结果。📊✨ 1. determinant - 计算行列式 🧮 定义: double determinant(InputArray mtx); 参数…

web前端网页实例:深度剖析与实践指南

web前端网页实例&#xff1a;深度剖析与实践指南 在数字化时代的浪潮中&#xff0c;web前端网页已成为企业与用户之间的桥梁&#xff0c;承载着信息的传递与交互的重任。本文将通过四个方面、五个方面、六个方面和七个方面的详细剖析&#xff0c;带您深入了解web前端网页实例的…

实在智能应邀出席中国移动科技工作者论坛,分享基于大模型+Agent智能体的“企业大脑”

为大力弘扬科学家精神&#xff0c;激励广大科技工作者践行科技报国、创新为民&#xff0c;争做高水平科技自立自强排头兵&#xff0c;6月6日&#xff0c;中国移动在线营销服务中心&#xff08;以下简称“在线中心”&#xff09;“2024年科技工作者大讲堂暨青年创新创效论坛”于…

Matlab|基于手肘法的kmeans聚类数的精确识别【K-means聚类】

主要内容 在电力系统调度研究过程中&#xff0c;由于全年涉及的风、光和负荷曲线较多&#xff0c;为了分析出典型场景&#xff0c;很多时候就用到聚类算法&#xff0c;而K-means聚类就是常用到聚类算法&#xff0c;但是对于K-means聚类算法&#xff0c;需要自行指定分类数&…

C/C++:指针用法详解

C/C&#xff1a;指针 指针概念 指针变量也是一个变量 指针存放的内容是一个地址&#xff0c;该地址指向一块内存空间 指针是一种数据类型 指针变量定义 内存最小单位&#xff1a;BYTE字节&#xff08;比特&#xff09; 对于内存&#xff0c;每个BYTE都有一个唯一不同的编号…

赶紧转行大模型,预计风口就今年一年,明年市场就饱和了!不是开玩笑

恕我直言&#xff0c;就这几天&#xff0c;各大厂都在裁员&#xff0c;什么开发测试运维都裁&#xff0c;只有大模型是急招人。 你说你不知道大模型是什么&#xff1f;那可太对了&#xff0c;你不知道说明别人也不知道&#xff0c;就是要趁只有业内部分人知道的时候入局&#…

深入理解Python中的多线程与多进程编程

深入理解Python中的多线程与多进程编程 在现代计算中,充分利用多核处理器和并行计算资源变得越来越重要。Python提供了多线程和多进程编程的支持,使开发者能够编写高效的并行程序。本文将深入探讨Python中的多线程与多进程编程,包括基本概念、使用方法以及实际应用场景。 …

String常用方法详解

auth&#xff1a;别晃我的可乐 date&#xff1a;2024年06月16日 比较大小 equals(Object obj): 用于比较字符串内容是否相等。compareTo(String anotherString): 按字典顺序比较两个字符串。 String str1 "hello"; String str2 "world";boolean isEqual …

配置Linux DNS服务器作为自己的windows 的 DNS服务器和 配置遇到的问题

安装DNS 库 和 DNS工具&#xff1a; # bind 是用于创建 dns服务的&#xff0c; bind-utils是用于测试DNS服务的工具 yum -y install bind bind-utils配置主配置文件&#xff1a; # 下载好后就已经有DNS服务&#xff0c;但是需要你自己去配置DNS服务信息# 配置主配置文件 [rootl…

SylixOS下UDP组播测试程序

SylixOS下UDP组播测试 测试效果截图如下: udp组播发送测试程序。 /********************************************************************************************************* ** ** 中国软件开源组织 ** ** …

java中把对象作为参数

在Java中&#xff0c;把对象作为参数传递给方法是一种常见的编程模式。Java是一种面向对象的语言&#xff0c;因此它支持创建对象并使用这些对象作为参数、返回值或存储在变量中。以下是关于在Java中把对象作为参数的详细解释&#xff1a; 1. 为什么要把对象作为参数 数据共享…

使用 Vibration API 进行网页振动效果

Vibration API 是一种简单的 JavaScript API&#xff0c;可以让网页通过振动设备&#xff08;如手机&#xff09;的振动功能来提供触觉反馈。这在创建更加互动和沉浸式的用户体验时非常有用。本文将介绍如何在网页中使用 Vibration API 实现振动效果。 什么是 Vibration API&a…