LightningChart JS是Web上性能特高的圖表庫，具有出色的執(zhí)行性能 - 使用高數(shù)據(jù)速率同時(shí)監(jiān)控?cái)?shù)十個(gè)數(shù)據(jù)源。 GPU加速和WebGL渲染確保您的設(shè)備的圖形處理器得到有效利用，從而實(shí)現(xiàn)高刷新率和流暢的動(dòng)畫，常用于貿(mào)易，工程，航空航天，醫(yī)藥和其他領(lǐng)域的應(yīng)用。

在上文中（點(diǎn)擊這里回顧>>），我們主要介紹了SQL儀表板應(yīng)用程序、項(xiàng)目概述、技術(shù)要求等內(nèi)容，本文將繼續(xù)介紹SQL Server無API自動(dòng)化、Angular開發(fā)、圖表開發(fā)等內(nèi)容，持續(xù)關(guān)注我們哦~

SQL Server No-API自動(dòng)化

如果您有使用SQL Server的經(jīng)驗(yàn)，理解表的實(shí)體關(guān)系是沒有問題的。盡管這些查詢看起來很難理解，但它們將作為您進(jìn)行調(diào)整的基礎(chǔ)。

如何在沒有API的情況下自動(dòng)化SQL Server流程？

1. 使用CMD Shell命令將JSON文件保存到與Angular項(xiàng)目共享的路徑中。
2. 創(chuàng)建在特定日期時(shí)間執(zhí)行存儲(chǔ)過程的SQL Server JOB。

恢復(fù)備份時(shí)，必須使用恢復(fù)工具：

然后你必須選擇[Device]， [add]選項(xiàng)，找到.bak文件：

最后，確認(rèn)并運(yùn)行備份。

Angular開發(fā)

使用Visual Studio Code，您將需要打開SQL Dashboard項(xiàng)目，一旦打開，將看到以下結(jié)構(gòu)：

在安裝項(xiàng)目依賴項(xiàng)之前，node_modules文件夾將不可用。為此您必須打開一個(gè)新的終端并運(yùn)行npm install命令。您需要在電腦上安裝Angular才能執(zhí)行它的命令，可以通過執(zhí)行下面的命令來實(shí)現(xiàn)：

npm install -g @angular/cli.

全局屬性(-g)會(huì)全局安裝Angular，并允許您在本地計(jì)算機(jī)上使用包中的代碼作為一組工具。一旦項(xiàng)目配置好了，就可以繼續(xù)代碼審查了。

App.component

組件是Angular應(yīng)用中最基本的UI構(gòu)建塊，Angular組件是指令的一個(gè)子集，總是與模板相關(guān)聯(lián)，App組件是Angular在從頭生成項(xiàng)目時(shí)創(chuàng)建的。

我們將使用這個(gè)組件作為父組件，它將包含儀表板的內(nèi)容。HTML文件將包含導(dǎo)航欄和主體，其他模板將在其上呈現(xiàn)。

<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，類的結(jié)構(gòu)和名稱必須保持相同，來利用Bootstrap的優(yōu)點(diǎn)，包括響應(yīng)性、外觀和效果。在其聲明中，模塊文件將包含項(xiàng)目中的其余組件：

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

路由

路由器通過將瀏覽器URL解釋為改變視圖的指令來實(shí)現(xiàn)導(dǎo)航，條形圖中的每個(gè)菜單項(xiàng)都必須添加到路由器中：

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

RankingComponent是我們的排名視圖的組件，它將包含儀表板圖表。

<li class="nav-item">
<a class="nav-link" href="/ranking">Ranking</a>
</li>

圖表開發(fā)

在Charts文件夾中，我們將找到4-Dashboard圖表的組件：

組件具有相同的結(jié)構(gòu)：CSS、HTML、Typescript，在每個(gè)CSS文件中，我們將看到為HTML div元素指定了一個(gè)以像素為單位的高度：

div { height: 350px;}

由于圖表組件將在其HTML結(jié)構(gòu)中只使用一個(gè)DIV(將包含圖表的DIV)，因此將為圖表分配一個(gè)最大高度，以防止圖表過大或過小。在HTML文件中，我們將創(chuàng)建包含圖表的div：

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

我們將為它分配一個(gè)ID，以幫助LightningChart JS查找并分配將顯示圖表的HTML對象。

Component.ts

這個(gè)文件將包含創(chuàng)建圖表的邏輯，首先我們將看到幫助構(gòu)建圖表的模塊，以及實(shí)現(xiàn)圖表所需的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";

有一個(gè)JSON文件導(dǎo)入，該文件將包含由SQL Server存儲(chǔ)過程(getDashboardJSONData)生成的JSON。

let TOTAL_NUMBER_ARTICLES_CATEGORY = donutdata.TOTAL_NUMBER_ARTICLES_CATEGORY

JSON對象將被分配給一個(gè)變量，該變量稍后將用于映射和格式化數(shù)據(jù)。授權(quán)JSON對象將包含授權(quán)許可的字符串，并將分配給LightningChart JS庫的授權(quán)許可屬性：

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

您可以獲得一個(gè)免費(fèi)的使用LightningChart JS授權(quán)（可聯(lián)系“”獲取），有了這個(gè)授權(quán)，您將能夠訪問完整的庫并繼續(xù)實(shí)施這個(gè)項(xiàng)目。要更新license，必須進(jìn)入文件license，并替換它的值：

{"license":"xxx-xxxx"}

容器屬性必須具有與HTML文件中創(chuàng)建的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映射和格式化代碼將根據(jù)圖表而更改，視覺屬性也會(huì)有所不同，但是每個(gè)屬性都可以在官方的LightningChart JS文檔中查閱，所有圖表組件的導(dǎo)入模塊和授權(quán)設(shè)置將保持不變。

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

上面的代碼顯示了三個(gè)屬性，每個(gè)屬性引用一個(gè)HTML模板和一個(gè)樣式文件。

• selector屬性告訴Angular，只要在HTML模板中找到相應(yīng)的標(biāo)簽，就創(chuàng)建一個(gè)該組件的實(shí)例。
• 選擇器值很重要，因?yàn)槲覀儗⑼ㄟ^它將每個(gè)圖表組件加載到Ranking組件中。

篇幅有限，更多精彩內(nèi)容我們下期再見......