LightningChart JS是性能最高的JavaScript圖表庫，專注于實(shí)時(shí)數(shù)據(jù)可視化。是Web上性能最高的圖表庫具有出色的執(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)用。

LightningChart JS | 下載試用

歡迎加入LightningChart技術(shù)交流群： 740060302  

JavaScript 儀表圖

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

儀表圖的特點(diǎn)

儀表圖也稱為刻度盤或速度計(jì)圖表，這種類型的圖表易于理解和實(shí)施。它的一些特點(diǎn)是：

• 儀表圖側(cè)重于單個(gè)值及其相對(duì)于特定變量測(cè)量總值的進(jìn)度。
• 儀表圖很容易理解，因?yàn)樗鼈兊姆秶湍繕?biāo)標(biāo)記提供了所測(cè)量?jī)?nèi)容的額外背景。也就是說，可視化最小值、當(dāng)前值和最大值。
• 儀表圖可以使用顏色、漸變和陰影來幫助用戶理解和體驗(yàn)。
• 儀表圖表直截了當(dāng)，信息得到簡(jiǎn)化，并提供對(duì)單個(gè)測(cè)量的關(guān)注。

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

項(xiàng)目概況

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

下載以學(xué)習(xí)本教程

本地設(shè)置

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

2.下載模板后，你會(huì)看到一個(gè)這樣的文件列表：

3. 打開一個(gè)新終端并運(yùn)行 npm install 命令：

與在 NodeJS 項(xiàng)目中一樣，您需要運(yùn)行 npm install 命令。這就是我們初始設(shè)置的全部操作。

CHART.ts

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

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

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

2.從lcjs中提取需要的類

const { lightningChart, GaugeChartTypes, Themes } = lcjs

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

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：確定將在儀表板頂部顯示為標(biāo)題的文本。
• Theme: 在這里您可以指定主題顏色。默認(rèn)情況下，LightningChart JS 有一系列可以通過 Themes訪問的實(shí)現(xiàn)。
• setDataLabelFormatter： 此屬性為數(shù)據(jù)標(biāo)簽定義了一個(gè)新的數(shù)字格式化程序。
• setThickness： 定義儀表圖的厚度。
• setAngleInterval： 它定義了以度數(shù)表示的儀表的間隔。

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

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

使用 getDefaultSlice，我們將調(diào)用儀表圖的切片。 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,
})

在此步驟中，我們將在圖表中添加內(nèi)部圖例框：

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

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

6. 添加圖例框

legend.add(gauge)

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

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

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

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

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