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

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

SQL Server No-API自動化

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

如何在沒有API的情況下自動化SQL Server流程？

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

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

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

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

Angular開發(fā)

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

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

npm install -g @angular/cli.

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

App.component

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

我們將使用這個組件作為父組件，它將包含儀表板的內(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)點，包括響應(yīng)性、外觀和效果。在其聲明中，模塊文件將包含項目中的其余組件：

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

路由

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

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，在每個CSS文件中，我們將看到為HTML div元素指定了一個以像素為單位的高度：

div { height: 350px;}

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

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

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

Component.ts

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

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

let TOTAL_NUMBER_ARTICLES_CATEGORY = donutdata.TOTAL_NUMBER_ARTICLES_CATEGORY

JSON對象將被分配給一個變量，該變量稍后將用于映射和格式化數(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',
})

您可以獲得一個免費的使用LightningChart JS授權(quán)（可聯(lián)系“”獲取），有了這個授權(quán)，您將能夠訪問完整的庫并繼續(xù)實施這個項目。要更新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ù)圖表而更改，視覺屬性也會有所不同，但是每個屬性都可以在官方的LightningChart JS文檔中查閱，所有圖表組件的導(dǎo)入模塊和授權(quán)設(shè)置將保持不變。

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

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

• selector屬性告訴Angular，只要在HTML模板中找到相應(yīng)的標(biāo)簽，就創(chuàng)建一個該組件的實例。
• 選擇器值很重要，因為我們將通過它將每個圖表組件加載到Ranking組件中。

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