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

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

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

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

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

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

項目概述

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

1. 甜甜圈圖表

2. 橫條形圖

3. 階梯級數(shù)圖

4. 豎條形圖

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

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

我們的儀表板將顯示來自科技文章的營銷信息及其有關(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)試用或購買)
6. Visual Studio代碼

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

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

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

Author table將包含作者的名字：

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

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

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

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

有效負(fù)荷

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

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

這個過程將返回一個JSON字符串，我們需要將它粘貼到Angular項目中的一個文件中。

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

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

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

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

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