COVID-19（冠狀病毒）大流行仍在威脅著全世界數(shù)百萬人的生命。疫苗接種已經(jīng)開始，希望它們將繼續(xù)保持穩(wěn)定的積極全球影響。 通過此條形圖競賽，我們展示了不同國家/地區(qū)如何在大流行期間診斷和報告 COVID-19 感染人數(shù)，在本文中，我們將使用LightningChart JS條形圖向您展示如何創(chuàng)建 COVID-19 的可視化世界各地的確診病例，但我們將添加更多功能（增加、重新排序和計數(shù)動畫）。

LightningChart JS官方正版下載

此外，對于此圖表，我們將使用從 COVID 跟蹤器 API 獲取的數(shù)據(jù)。

//coronavirus-tracker-api.herokuapp.com/confirmed

這些數(shù)據(jù)是真實的，因此如果您需要處理 COVID-19 信息，此圖表將對您有用。 在本練習中，我們將使用來自冠狀病毒追蹤器 API 和本地 JSON 文件的數(shù)據(jù)。

項目概況

為了跟蹤全球的病毒病例數(shù)并確保人們的安全，許多組織開發(fā)了自定義圖表來可視化他們的數(shù)據(jù)。

這是我們開發(fā)的示例，一個賽車條形圖。這種類型的圖表顯示了一段時間內的病例數(shù)，因為圖表中國家/地區(qū)的位置根據(jù)病例數(shù)而變化。這樣就可以很容易地從登記案件的數(shù)量方面了解這些國家的發(fā)展情況。

配置模板

1. 請下載本文提供的模板。
2. 在 Visual Studio Code 中打開后，您將看到如下所示的文件樹：



如您所見，我們只有一個 JSON 數(shù)據(jù)文件和 COVIDCHART 打字稿文件。

3. 請打開一個新終端。
4. 像往常一樣在 Node JS 項目中，我們必須運行 NPM 安裝命令。

JSON文件

1. 在我們的covid.json文件中，我們將看到以下結構：

   

• 成員：將在我們的打字稿代碼中用于獲取成員的根節(jié)點。
• 國家：在此文件中選擇的所有國家的名稱值。
• 歷史記錄： covid 病例的日期和數(shù)值（按天）。



如果您想向此文件添加更多數(shù)據(jù)，可以從此處獲取數(shù)據(jù)：
//coronavirus-tracker-api.herokuapp.com/confirmed

COVIDCHART.ts

在這個文件中，我們將擁有創(chuàng)建圖表、配置動畫和格式化數(shù)據(jù)所需的所有邏輯。

1. 導入 JSON 數(shù)據(jù)文件。
2. 聲明將引用我們的@arction/lcjs 庫的常量 lcjs。
3. 從 lcjs 中提取所需的類。



4. 現(xiàn)在我們將聲明以下常量：



 這些值將影響我們圖表的行為，因此現(xiàn)在聲明它們并將它們用作全局值，對于我們圖表中的任何更新都會更容易。

• rectThickness：這將影響我們圖表中所有條形的粗細。值越高，條越細，反之亦然（值可以是浮動的）。
• rectGap：會影響標簽的位置和每個條的數(shù)字。
• 持續(xù)時間：這將是我們所有柱的加速時間。如果您指定一個次要值，條形圖將更快地加載這些值。
5. 配置圖表對象：在創(chuàng)建圖表之前，我們需要配置主要屬性。



之后，我們可以通過簡單地使用緯度/經(jīng)度坐標作為 XY 軸值來可視化世界上的任何位置！

• Ls.ChartXY：我們指定要創(chuàng)建一個 XY 圖表類型。
• setTitle：將在圖表頂部顯示為標題的文本。該值是一個字符串類型，因此您可以動態(tài)構造一個字符串值。
• setAutoCursorMode：通過從AutoCursorModes中選擇預設選項來設置圖表 AutoCursor 行為。

  閱讀更多：

  //www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setautocursormode
• setPadding：所有邊都有像素邊距的數(shù)字，或者每邊都有單獨像素填充的數(shù)據(jù)結構。任何一方都可以省略，只有傳遞的值會被覆蓋。

  閱讀更多：

  //www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setPadding
• setMouseInteractions：此布爾值將啟用圖表構建中可以支持的所有鼠標交互。

  閱讀更多： https ://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setmouseinteractions

• getDefaultAxisY/AxisX：獲取對 ChartXY 的默認 Y 軸的引用。這將始終返回對最接近圖表的 Y 軸的引用（從底部開始）。[getDefaultAxisX]下面的所有方法都只會影響 X 軸。（如果您需要參考 Y 軸[getDefaultAxisY]，則使用相同的邏輯）。

  閱讀更多：

  //www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setmouseinteractions



• setTickStrategy： TickStrategy定義了 Axis刻度的定位和格式化邏輯以及創(chuàng)建的刻度的樣式。

  閱讀更多：

  //www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/axis.html#settickstrategy
• setAnimationScroll：指定要使用的縮放動畫。

  閱讀更多：

  //www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/axis.html#setanimationscroll
• createTickLabel：在這個函數(shù)中，我們將聲明所有柱的標簽屬性：



• addCountryHandler：該函數(shù)返回具有維度、數(shù)據(jù)（條目）和標簽屬性的單個條形圖。



每個國家都有不同風格的矩形系列：



將 TextBox 元素添加到欄：



設置標簽標題和位置：



設置 Y 軸的間隔：



增加 Y 變量的值：



返回圖：



• addCountries：該函數(shù)將作為循環(huán)工作，為每個柱執(zhí)行[addCountryHandler]函數(shù)。



• sortCountries：該函數(shù)將按日期對所有數(shù)據(jù)進行排序。
  在“data”參數(shù)中，我們將在“members”元素中包含所有值。“ raceDay”參數(shù)將作為我們圖表開始的初始值?！皉aceDay”將使用變量“initDay”（15）中的值。結果將在“countryList”對象中返回。



• startRace：這個函數(shù)將協(xié)調我們之前聲明的所有函數(shù)。該函數(shù)將為“startRaceHandler”函數(shù)執(zhí)行。



• startRaceHandler：這里我們會將 JSON 數(shù)據(jù)發(fā)送到 [startRace] 函數(shù)。我們將開始發(fā)出 HTTP 請求（獲?。?，以獲取 LightningChart 提供的 COVID 數(shù)據(jù)。該數(shù)據(jù)由 CORONAVIRUS Tracker API 獲取。
  結果將被發(fā)送到[startRace]函數(shù)。如果請求失敗，則將 JSON 文件作為數(shù)據(jù)源。



在[startRace]內部，我們將使用函數(shù)[mergeData]。有些國家是按地區(qū)劃分的，需要合并。 這更適用于實時提供的數(shù)據(jù)。

• 最后一步是創(chuàng)建圖表對象并將其發(fā)送到[startRaceHandler]。
  所有之前的方法都將包含在 [startRaceHandler]中。



然后我們可以指定最適合我們的主題（外觀和感覺）。



NPM 啟動

說明和項目已準備就緒。 最后一步是運行我們的項目。與其他文章一樣，我們只需要在終端中運行命令“npm start”。

正如我們所見，開始比賽功能將控制每根柱的速度和自動分類。這些國家將根據(jù) COVID 病例的數(shù)量上下移動。

加入LightningChart技術交流群：786598704 ，了解更多咨詢。

Lightning Chart 提供各種主題 (UI)，這種類型的圖表可以用于移動應用程序、Web 應用程序和桌面應用程序。 可能性很多，可以幫助您提供更完整、更專業(yè)的產(chǎn)品。更多案例探究，點擊LightningChart JS 使用教程了解更多信息。

想要了解或購買LightningChart JS正版授權的朋友，歡迎咨詢