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

LightningChart JS | 下載試用

歡迎加入LightningChart技術交流群： 740060302  

JavaScript 儀表圖

在本文中，我們將使用 LightningChart JS 創(chuàng)建一個 JavaScript 儀表圖表。該項目的實現(xiàn)將與其他文章類似，例如圓環(huán)圖或餅圖。建議您檢查這些并擴展您的命令以創(chuàng)建簡單的 JS 圖表應用程序。

儀表圖的特點

儀表圖也稱為刻度盤或速度計圖表，這種類型的圖表易于理解和實施。它的一些特點是：

• 儀表圖側重于單個值及其相對于特定變量測量總值的進度。
• 儀表圖很容易理解，因為它們的范圍和目標標記提供了所測量內容的額外背景。也就是說，可視化最小值、當前值和最大值。
• 儀表圖可以使用顏色、漸變和陰影來幫助用戶理解和體驗。
• 儀表圖表直截了當，信息得到簡化，并提供對單個測量的關注。

由于您可能已經熟悉這種類型的圖表，所以讓我們從項目開始。

項目概況

您可以在此處與儀表圖進行交互。在本教程中，您將找到所有必要的屬性來幫助您自定義它的外觀。

下載以學習本教程

本地設置

1. 下載將幫助我們開始使用此示例的初始模板。

2.下載模板后，你會看到一個這樣的文件列表：

3. 打開一個新終端并運行 npm install 命令：

與在 NodeJS 項目中一樣，您需要運行 npm install 命令。這就是我們初始設置的全部操作。

CHART.ts

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

1. 引用@arction/lcjs 庫的常量lcjs。

const lcjs = require('@arction/lcjs')

2.從lcjs中提取需要的類

const { lightningChart, GaugeChartTypes, Themes } = lcjs

3.創(chuàng)建圖表對象

const gauge = lightningChart()
.Gauge({
theme: Themes.duskInLapland,
type: GaugeChartTypes.Solid,
})
.setTitle('Annual sales goal')
.setThickness(200)
.setDataLabelFormatter(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }))
.setAngleInterval(225, -45)

回顧一些參數(shù)：

• Gauge： 這是允許我們創(chuàng)建所需圖表類型的類。
• setTitle：確定將在儀表板頂部顯示為標題的文本。
• Theme: 在這里您可以指定主題顏色。默認情況下，LightningChart JS 有一系列可以通過 Themes訪問的實現(xiàn)。
• setDataLabelFormatter： 此屬性為數(shù)據(jù)標簽定義了一個新的數(shù)字格式化程序。
• setThickness： 定義儀表圖的厚度。
• setAngleInterval： 它定義了以度數(shù)表示的儀表的間隔。

4.創(chuàng)建儀表圖切片

const slice = gauge
.getDefaultSlice()
.setInterval(0, 400000)
.setValue(329000)
.setName('2023 sales')

使用 getDefaultSlice，我們將調用儀表圖的切片。 setInterval將確定圖表中使用的間隔。setValue確定度量切片的值。setName 定義圖表的名稱，例如，您可以使用此屬性將其顯示在圖例框中。

5.圖例框

const legend = gauge
.addLegendBox()
// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
.setAutoDispose({
type: 'max-width',
maxWidth: 0.3,
})

在此步驟中，我們將在圖表中添加內部圖例框：

setAutoDispose：這是響應性的功能。如果示例 UI 元素占用太多空間，它會自動處理它們，這有助于避免在小屏幕設備上出現(xiàn)糟糕的用戶體驗。

legendBoxBuilder： 可用 LegendBox 構建器的集合。要構建 LegendBoxes，您必須將其中之一傳遞給方法：addLegendBox()。可以通過圖表、儀表板等訪問此方法。

6. 添加圖例框

legend.add(gauge)

它將圖例框添加到儀表圖表。

與其他類似項目一樣，您必須打開一個新終端（例如，在 Visual Studio 中）并運行 npm start命令。然后您將獲得本地主機的 URL 路徑，并能夠在瀏覽器中可視化您的圖表。

因此，正如在本文中看到的那樣，我們創(chuàng)建了簡單的圖表，以便在初學者級別使用 JavaScript 進行開發(fā)。但是，根據(jù)客戶或項目的需要，每個圖表的復雜性可能不同。

本次關于如何使用 LightningChart JS 創(chuàng)建 JavaScript 儀表圖的介紹到這里了，點擊此處查看LightningChart相關教程。

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