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

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

SQL Server No-API自動化

如果您有使用SQL Server的經驗，理解表的實體關系是沒有問題的。盡管這些查詢看起來很難理解，但它們將作為您進行調整的基礎。

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

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

恢復備份時，必須使用恢復工具：

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

最后，確認并運行備份。

Angular開發

使用Visual Studio Code，您將需要打開SQL Dashboard項目，一旦打開，將看到以下結構：

在安裝項目依賴項之前，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},
];

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

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

圖表開發

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

組件具有相同的結構：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，并替換它的值：

{"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組件中。

篇幅有限，更多精彩內容我們下期再見......