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

SQL儀表板應(yīng)用程序

在本文中，我們將看到一個(gè)使用幾種開(kāi)發(fā)工具的向項(xiàng)目，將用SQL Server中生成的數(shù)據(jù)創(chuàng)建一個(gè)SQL儀表板，并使用Angular進(jìn)行web開(kāi)發(fā)。在這個(gè)項(xiàng)目中，還將使用Bootstrap創(chuàng)建用戶界面。

您可以下載此項(xiàng)目，其中包括數(shù)據(jù)庫(kù)備份。值得一提的是，用戶必須擁有LightningChart JS試用許可證才能查看圖表，該許可證是免費(fèi)的。可直接戳這里獲取免費(fèi)試用授權(quán)>>

 此外要知道我們將使用SQL server生成數(shù)據(jù)，但數(shù)據(jù)傳輸將在Angular項(xiàng)目中手動(dòng)進(jìn)行，有必要使用API和開(kāi)發(fā)代碼通過(guò)web請(qǐng)求來(lái)使用數(shù)據(jù)。

在圖形界面方面，我們將使用Bootstrap來(lái)生成HTML模板，這將使得更容易創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站，意味著您可以在多個(gè)設(shè)備上查看此項(xiàng)目。

項(xiàng)目概述

下面是我們將用于創(chuàng)建SQL儀表板的圖表，請(qǐng)注意本文中不會(huì)逐一討論它們的開(kāi)發(fā)代碼，將只關(guān)注這個(gè)項(xiàng)目的實(shí)現(xiàn)。與任何儀表板一樣，使用摘要卡來(lái)顯示相關(guān)數(shù)據(jù)以獲得快速見(jiàn)解總是很有用的，因此我們會(huì)添加一些卡片來(lái)匯總數(shù)據(jù)。

1. 甜甜圈圖表

2. 橫條形圖

3. 階梯級(jí)數(shù)圖

4. 豎條形圖

 與任何儀表板一樣，提供信息卡來(lái)顯示相關(guān)數(shù)據(jù)以進(jìn)行快速分析總是很有用的，因此我們將添加一些卡片，作為數(shù)據(jù)庫(kù)中的數(shù)據(jù)摘要。

關(guān)于數(shù)據(jù)集

我們的儀表板將顯示來(lái)自科技文章的營(yíng)銷(xiāo)信息及其有關(guān)流量、觀點(diǎn)、作者和有機(jī)排名的數(shù)據(jù)。

技術(shù)要求

1. SQL Server Management Studio v18或更高版本。
2. 本地主機(jī)的MSSQL服務(wù)器實(shí)例。
3. Node JS 16或更高版本(與Angular版本兼容)
4. Angular v15或更高版本。
5. Lightning Chart JS授權(quán)(免費(fèi)試用或購(gòu)買(mǎi))
6. Visual Studio代碼

SQL Server + 數(shù)據(jù)庫(kù)

您可以在項(xiàng)目文件夾內(nèi)的DB文件夾中找到SQL Server恢復(fù)文件，該文件包含將用于生成儀表板有效負(fù)載的數(shù)據(jù)表。該文件還包含一個(gè)存儲(chǔ)過(guò)程，其中包含有效負(fù)載所需的查詢，這些表的結(jié)構(gòu)如下：

Article table將包含Dashboard中可用的條目名稱：

Author table將包含作者的名字：

Category table將作為一個(gè)目錄，根據(jù)所解釋的主題類(lèi)型對(duì)文章進(jìn)行分組：

Publishing table顯示了文章、作者、類(lèi)別和每個(gè)出版日期之間的關(guān)系。

我們管理主表的實(shí)體關(guān)系，PublishingDetails表包含每個(gè)出版物的統(tǒng)計(jì)數(shù)據(jù)，例如每個(gè)出版物的排名、印象、視圖和閱讀持續(xù)時(shí)間。

數(shù)據(jù)是隨機(jī)生成的，我們總共只涵蓋了10篇文章，您可以根據(jù)需要調(diào)整本教程示例。表包含外鍵，因此在修改它們之前必須刪除所有關(guān)系。

有效負(fù)荷

有效負(fù)荷是通過(guò)作為HTTP響應(yīng)發(fā)送的消息傳輸?shù)囊唤M數(shù)據(jù)，API幫助通過(guò)HTTP響應(yīng)獲取這些數(shù)據(jù)，以便在項(xiàng)目中作為JSON字符串讀取和操作這些數(shù)據(jù)。

在這個(gè)項(xiàng)目中，我們將沒(méi)有API來(lái)自動(dòng)化這個(gè)過(guò)程，但能夠生成一個(gè)JSON字符串，作為儀表板的響應(yīng)和數(shù)據(jù)源。在可編程性-存儲(chǔ)過(guò)程文件夾中，我們會(huì)發(fā)現(xiàn)過(guò)程getDashboardJSONData：

這個(gè)過(guò)程將返回一個(gè)JSON字符串，我們需要將它粘貼到Angular項(xiàng)目中的一個(gè)文件中。

通過(guò)點(diǎn)擊結(jié)果，您將能夠訪問(wèn)完整的字符串：

您只需要復(fù)制粘貼它，在這個(gè)過(guò)程中，我們將找到查詢塊，這些查詢塊將具有適合在Angular項(xiàng)目中讀取的格式，這些查詢將在最終的JSON對(duì)象中生成元素：

在上面的例子中，變量TOTAL_NUMBER_ARTICLES_CATEGORY將是一個(gè)嵌套對(duì)象，它將包含按類(lèi)別計(jì)數(shù)的文章：

這個(gè)分組將作為甜甜圈圖的數(shù)據(jù)源，JSON路徑允許我們將查詢結(jié)果格式化為JSON對(duì)象。

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