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

在上文中（點(diǎn)擊這里回顧>>），我們主要介紹了SQL儀表板應(yīng)用程序的SQL Server No-API自動(dòng)化、Angular開(kāi)發(fā)、圖表開(kāi)發(fā)等，本文將繼續(xù)介紹該應(yīng)用程序的排名、Data.json及Angular項(xiàng)目運(yùn)行等。

排名

RankingComponent將加載圖表的其余組件，每個(gè)圖表組件將在通過(guò)排序調(diào)用時(shí)執(zhí)行，因此不必?fù)?dān)心該組件中的進(jìn)程，我們只需要使用它們的selector（選擇器）來(lái)調(diào)用或執(zhí)行它們。

SQL儀表板卡上的數(shù)據(jù)

 在卡片的情況下，因?yàn)樗鼈冎皇秋@示特定值的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標(biāo)記一樣使用組件選擇器。為了使圖表整齊地顯示并響應(yīng)其余的HTML代碼，我們必須將其包含在Bootstrap HTML結(jié)構(gòu)中：

<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>

響應(yīng)性

下面是SQL指示板響應(yīng)性的一些示例，當(dāng)您使用選擇器調(diào)用圖表組件時(shí)，它將根據(jù)TypeScript文件中的代碼進(jìn)行處理，結(jié)果將在Ranking HTML中呈現(xiàn)。

Data.json

該文件位于assets文件夾中，您必須在這里粘貼從數(shù)據(jù)庫(kù)獲得的結(jié)果。

當(dāng)您在瀏覽器中刷新站點(diǎn)時(shí)，數(shù)據(jù)將立即獲得。如果查看每個(gè)組件的導(dǎo)入，您會(huì)注意到包含JSON文件的變量指向assets-data文件夾的路徑。

運(yùn)行Angular項(xiàng)目

ng serve命令構(gòu)建、部署、服務(wù)并顯示我們的代碼變更：

編譯成功后，我們可以打開(kāi)終端指定的路徑來(lái)查看項(xiàng)目：

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

最終應(yīng)用程序示例

結(jié)論

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