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

SQL儀表板應用程序

在本文中，我們將看到一個使用幾種開發工具的向項目，將用SQL Server中生成的數據創建一個SQL儀表板，并使用Angular進行web開發。在這個項目中，還將使用Bootstrap創建用戶界面。

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

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

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

項目概述

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

1. 甜甜圈圖表

2. 橫條形圖

3. 階梯級數圖

4. 豎條形圖

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

關于數據集

我們的儀表板將顯示來自科技文章的營銷信息及其有關流量、觀點、作者和有機排名的數據。

技術要求

1. SQL Server Management Studio v18或更高版本。
2. 本地主機的MSSQL服務器實例。
3. Node JS 16或更高版本(與Angular版本兼容)
4. Angular v15或更高版本。
5. Lightning Chart JS授權(免費試用或購買)
6. Visual Studio代碼

SQL Server + 數據庫

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

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

Author table將包含作者的名字：

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

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

我們管理主表的實體關系，PublishingDetails表包含每個出版物的統計數據，例如每個出版物的排名、印象、視圖和閱讀持續時間。

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

有效負荷

有效負荷是通過作為HTTP響應發送的消息傳輸的一組數據，API幫助通過HTTP響應獲取這些數據，以便在項目中作為JSON字符串讀取和操作這些數據。

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

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

通過點擊結果，您將能夠訪問完整的字符串：

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

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

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

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