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

在上文中（點擊這里回顧>>），我們主要介紹了SQL儀表板應用程序的SQL Server No-API自動化、Angular開發、圖表開發等，本文將繼續介紹該應用程序的排名、Data.json及Angular項目運行等。

排名

RankingComponent將加載圖表的其余組件，每個圖表組件將在通過排序調用時執行，因此不必擔心該組件中的進程，我們只需要使用它們的selector（選擇器）來調用或執行它們。

SQL儀表板卡上的數據

在卡片的情況下，因為它們只是顯示特定值的HTML模板，我們可以提取位于JSON文件中的這些值，并將它們分配給可以在排名HTML中使用的變量：

export class RankingComponent {
ARTICLES_TOTAL = `${data.ARTICLES_SUMMARY[0].ARTICLES_TOTAL}`;
AUTHORS_TOTAL = `${data.ARTICLES_SUMMARY[0].AUTHORS_TOTAL}`;
HIGHER_RANKING = `${data.ARTICLES_SUMMARY[0].HIGHER_RANKING}`;
LOWER_RANKING = `${data.ARTICLES_SUMMARY[0].LOWER_RANKING}`;
VIEWS_TOTAL = `${data.ARTICLES_SUMMARY[0].VIEWS_TOTAL}`;
URL_IMPRESSIONS_TOTAL = `${data.ARTICLES_SUMMARY[0].URL_IMPRESSIONS_TOTAL}`;
AVG_DURATION_TOTAL = `${data.ARTICLES_SUMMARY[0].AVG_DURATION_TOTAL}`;
}

<!-- Ranking HTML-->
<div class="card">
<div class="card-header" style=" background-color: #6f7d96;color: white;font-size: large;border: none">Article Summary:</div>
<div class="card-body styled-card">
<div class="row">
<div class="col-sm-6">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-content">
<div class="card-body styled-shadow">
<div class="media d-flex">
<div class="align-self-center">
<i class="icon-pencil primary font-large-2 float-left"></i>
</div>
<div class="media-body text-right">
<h1>{{ARTICLES_TOTAL | number}}</h1>
<figure>
<blockquote>
<p>Total Number of Articles</p>
</blockquote>
<figcaption class="blockquote-footer">
<cite title="Source Title">Only published in lightningchart.com</cite>
</figcaption>
</figure>

為了在SQL儀表板中顯示圖表，我們需要像使用HTML標記一樣使用組件選擇器。為了使圖表整齊地顯示并響應其余的HTML代碼，我們必須將其包含在Bootstrap HTML結構中：

<div class="card styled-card">
<div class="card-header" style=" background-color: #6f7d96;color: white;font-size: large;border: none">Views Chart:</div>
<div class="card-body styled-card">
<div class="row">
<div class="col-sm-12">
<figure class="text-center">
<blockquote class="blockquote">
<p>Count of articles by author</p>
</blockquote>
<figcaption class="blockquote-footer">
<cite title="Source Title">Count of all items in the selected time period</cite>
</figcaption>
</figure>
<app-horizontal-bar-chart></app-horizontal-bar-chart>

響應性

下面是SQL指示板響應性的一些示例，當您使用選擇器調用圖表組件時，它將根據TypeScript文件中的代碼進行處理，結果將在Ranking HTML中呈現。

Data.json

該文件位于assets文件夾中，您必須在這里粘貼從數據庫獲得的結果。

當您在瀏覽器中刷新站點時，數據將立即獲得。如果查看每個組件的導入，您會注意到包含JSON文件的變量指向assets-data文件夾的路徑。

運行Angular項目

ng serve命令構建、部署、服務并顯示我們的代碼變更：

編譯成功后，我們可以打開終端指定的路徑來查看項目：

** Angular Live Development Server is listening on localhost:4200, open your browser on //localhost:4200/ **

最終應用程序示例

結論

LightningChart JS圖表組件與Angular和Bootstrap完全兼容(即使在Android和iOS應用中也是如此)，LightningChart JS的實現也非常簡單，允許與用戶進行高級交互，不需要編程或添加額外的代碼。本例中顯示的圖表非常簡單，您可以使用任何2D和3D圖表，甚至是面向處理數十萬個數據點的圖表。