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

LightningChart JS官方正版下載

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

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

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

項目概況

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

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

配置模板

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



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

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

JSON文件

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

   

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



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

COVIDCHART.ts

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

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



4. 現在我們將聲明以下常量：



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

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



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

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

  閱讀更多：

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

  閱讀更多：

  //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刻度的定位和格式化邏輯以及創建的刻度的樣式。

  閱讀更多：

  //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：在這個函數中，我們將聲明所有柱的標簽屬性：



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



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



將 TextBox 元素添加到欄：



設置標簽標題和位置：



設置 Y 軸的間隔：



增加 Y 變量的值：



返回圖：



• addCountries：該函數將作為循環工作，為每個柱執行[addCountryHandler]函數。



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



• startRace：這個函數將協調我們之前聲明的所有函數。該函數將為“startRaceHandler”函數執行。



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



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

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



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



NPM 啟動

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

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

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

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

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