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

本文我們將創(chuàng)建一個(gè)虛線(xiàn)折線(xiàn)圖（Dashed Line Chart），它是數(shù)據(jù)分析中常用、重要的圖表類(lèi)型之一，非常適合剛開(kāi)始做數(shù)據(jù)可視化練習(xí)的開(kāi)發(fā)人員。

虛線(xiàn)折線(xiàn)圖是一種折線(xiàn)圖，其中部分或全部線(xiàn)條用虛線(xiàn)代替實(shí)線(xiàn)。這種圖表是標(biāo)準(zhǔn)折線(xiàn)圖的一個(gè)變體，用于當(dāng)涉及多個(gè)數(shù)據(jù)系列時(shí)讓圖表更清晰，或用來(lái)區(qū)分不同的信息類(lèi)型（例如實(shí)際數(shù)據(jù) vs. 預(yù)測(cè)數(shù)據(jù)）。

它常用來(lái)：

• 區(qū)分同一個(gè)圖中不同的數(shù)據(jù)系列。
• 表示預(yù)測(cè)或估計(jì)數(shù)據(jù)與實(shí)際數(shù)據(jù)的區(qū)別。
• 在不讓可視化過(guò)于擁擠的情況下突出某些模式或趨勢(shì)。
• 進(jìn)行視覺(jué)對(duì)比：實(shí)線(xiàn)與虛線(xiàn)可用來(lái)比較歷史數(shù)據(jù)與未來(lái)預(yù)測(cè)數(shù)據(jù)。
• 突出某些區(qū)間：指示趨勢(shì)改變或強(qiáng)調(diào)特定數(shù)據(jù)區(qū)間。
• 區(qū)分類(lèi)別：當(dāng)圖中可視化多個(gè)數(shù)據(jù)集合時(shí)非常有用。
• 目標(biāo)指標(biāo)：虛線(xiàn)可以代表目標(biāo)線(xiàn)或閾值。

項(xiàng)目概覽

要遵循這個(gè)JavaScript多圖表畫(huà)布項(xiàng)目，請(qǐng)下載包含所有必要資源的ZIP文件。

模板設(shè)置

1. 下載提供的模板以便按教程操作。

2. 下載模板后，您會(huì)看到如下文件結(jié)構(gòu)（file tree）。

3. 打開(kāi)終端，運(yùn)行 npm install 命令。

4. 保持 tsconfig.json 文件中的配置很重要，這些配置會(huì)幫助您把 JSON 文件作為數(shù)據(jù)對(duì)象導(dǎo)入。

開(kāi)始使用

建議您使用并更新到LightningChart JS 和 的最新版本，這是因?yàn)槟承?LightningChart JS 的工具在舊版本中并不存在。在項(xiàng)目的 package.json 文件中可以看到 LightningChart JS 的依賴(lài)項(xiàng)：

"dependencies": {
"@lightningchart/lcjs": "^7.0.2",
}

1. 導(dǎo)入類(lèi)（Importing classes）

將從導(dǎo)入創(chuàng)建圖表所需的類(lèi)開(kāi)始。

import {AxisScrollStrategies, emptyFill, lightningChart, isImageFill, SolidFill, ColorRGBA, Themes} from "@lightningchart/lcjs";

2. 添加許可證 Key（免費(fèi)）

安裝完 LightningChart JS 庫(kù)后，我們將在 chart.ts 文件中導(dǎo)入他們。注意，您將需要一個(gè)試用許可證（trial license），是免費(fèi)的。

let license = undefined
try {
license = 'xxxxxxxxxxxxx'
} catch (e) {}

Chart.ts（核心代碼部分）

 這段代碼用于可視化財(cái)務(wù)趨勢(shì)，用實(shí)線(xiàn)表示過(guò)去收入，用虛線(xiàn)表示預(yù)測(cè)收入。它還突出了預(yù)測(cè)期，并確保圖表保持清晰、易讀和用戶(hù)友好。現(xiàn)在我們逐步回顧代碼及其作用。

import revenueData from './revenue.json';

const lcjs = require('@lightningchart/lcjs')
const { lightningChart, Themes, emptyFill, AxisTickStrategies, emptyLine, DashedLine, StipplePat

• 代碼首先從一個(gè) JSON 文件導(dǎo)入收入數(shù)據(jù)，這個(gè)數(shù)據(jù)將用來(lái)繪制過(guò)去收入與預(yù)測(cè)收入的趨勢(shì)。
• 接下來(lái)導(dǎo)入 lcjs（LightningChart JS）庫(kù)，用于創(chuàng)建高性能圖表。
• 從 lcjs 中提取有用的組件，比如 Themes（主題），DashedLine（虛線(xiàn)樣式），AxisTickStrategies（坐標(biāo)軸刻度策略）等。

創(chuàng)建帶有暗色主題的圖表

const chart = lightningChart({license:license})
.ChartXY({
theme: Themes.darkGold,
})
.setTitle('Historical and projected revenue')

• 這一塊初始化一個(gè)新的 XY 圖表（即有 X 軸和 Y 軸）。
• 應(yīng)用了暗金色主題（darkGold theme），使圖表外觀(guān)更時(shí)尚。
• 最后設(shè)定標(biāo)題：“Historical and projected revenue”（歷史與預(yù)測(cè)收入），清楚傳達(dá)圖表用途。

配置 X 軸和 Y 軸

const axisX = chart
.getDefaultAxisX()
// Configure DateTime X ticks.
.setTickStrategy(AxisTickStrategies.DateTime, (ticks) =>
// Show month, day and year in cursor result table
ticks.setCursorFormatter((timestamp) =>
new Date(timestamp).toLocaleDateString(undefined, { month: 'short', day: '2-digit', year: 'numeric' })
),
)

• 該部分自定義x軸，x軸代表時(shí)間。
• 它將軸設(shè)置為使用DateTime刻度，這意味著它將顯示日期而不是普通數(shù)字。
• 光標(biāo)格式確保當(dāng)您將鼠標(biāo)懸停在一個(gè)點(diǎn)上時(shí)，它會(huì)顯示一個(gè)可讀的日期，如“2025年3月15日”，而不是一個(gè)不可讀的時(shí)間戳。

const axisY = chart
.getDefaultAxisY()
// Configure Y axis formatting as "100 k€"
.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks.setFormattingFunction((euros) => `${(euros / 1000).toFixed(0)} k€`));

• Y 軸表示收入（歐元 €）。
• 不顯示原始數(shù)字，而是轉(zhuǎn)成“千歐元”的形式以保持干凈、易讀。
• 例如 100,000 歐元會(huì)顯示為 “100 k€”。

將數(shù)據(jù)分為過(guò)去數(shù)據(jù)與預(yù)測(cè)數(shù)據(jù)

const tNow = 1664456233537
const dataPast = revenueData.filter((p) => p.x <= tNow)
const dataProjection = revenueData.filter((p) => p.x > tNow)
dataProjection.unshift(dataPast[dataPast.Length - 1])

• 變量 tNow 是一個(gè)代表當(dāng)前日期的時(shí)間戳。
• 數(shù)據(jù)集被分為兩部分：
  • dataPast 包含時(shí)間戳 ≤ 當(dāng)前時(shí)間的歷史收入數(shù)據(jù)。
  • dataProjection 包含時(shí)間戳 > 當(dāng)前時(shí)間的預(yù)測(cè)收入數(shù)據(jù)。
• 為了使歷史數(shù)據(jù)到預(yù)測(cè)數(shù)據(jù)之間過(guò)渡平滑，把歷史數(shù)據(jù)的最后一個(gè)數(shù)據(jù)點(diǎn)放到預(yù)測(cè)數(shù)據(jù)的開(kāi)頭，這防止圖形中出現(xiàn)突變。

創(chuàng)建實(shí)線(xiàn)與虛線(xiàn)的數(shù)據(jù)系列

const seriesPast = chart
.addPointLineAreaSeries({ dataPattern: 'ProgressiveX', automaticColorIndex: 0 })
.appendJSON(dataPast)
.setName('Revenue (past)')
.setAreaFillStyle(emptyFill)

• 為歷史收入添加一個(gè)實(shí)線(xiàn)系列。
• ProgressiveX 模式表示數(shù)據(jù)點(diǎn)按時(shí)間遞增。
• emptyFill 確保線(xiàn)下面沒(méi)有陰影面積，使其保持簡(jiǎn)單明了的線(xiàn)條。

const seriesProjection = chart
.addPointLineAreaSeries({ dataPattern: 'ProgressiveX', automaticColorIndex: 0 })
.appendJSON(dataProjection)
.setStrokeStyle(
(stroke) =>
new DashedLine({
thickness: stroke.getThickness(),
fillStyle: stroke.getFillStyle(),
pattern: StipplePatterns.Dashed,
patternScale: 4,
}),
)
.setName('Revenue (projected)')
.setAreaFillStyle(emptyFill)

• 為預(yù)測(cè)收入添加一個(gè)虛線(xiàn)系列。
• 虛線(xiàn)的筆觸樣式區(qū)別于實(shí)線(xiàn)，以便在視覺(jué)上區(qū)別預(yù)測(cè)與實(shí)際歷史數(shù)據(jù)。
• patternScale: 4 使虛線(xiàn)的段落（dash）更大、更容易區(qū)分。

高亮預(yù)測(cè)期 & 添加 “Today” 標(biāo)記

axisX
.addBand()
.setValueStart(dataProjection[0].x)
.setValueEnd(dataProjection[dataProjection.length - 1].x)
.setStrokeStyle(emptyLine)
.setPointerEvents(false)
.setEffect(false)

• 在 X 軸上為預(yù)測(cè)期添加一個(gè)帶狀區(qū)間（Band），視覺(jué)上區(qū)分過(guò)去與未來(lái)數(shù)據(jù)。
• emptyLine 確保帶狀區(qū)間邊框不可見(jiàn)。
• setPointerEvents(false) 確保鼠標(biāo)交互（hover 等）不被這個(gè)帶狀區(qū)間阻擋。

axisX
.addCustomTick()
.setValue(dataProjection[0].x)
.setTickLength(20)
.setTextFormatter(() => 'Today')

• 添加一個(gè)自定義刻度，標(biāo)為 “Today”（今天），在預(yù)測(cè)開(kāi)始的時(shí)間點(diǎn)。
• 這樣用戶(hù)可以清楚地看到歷史數(shù)據(jù)結(jié)束、預(yù)測(cè)數(shù)據(jù)開(kāi)始的界限。

初始化圖表

在終端運(yùn)行 npm start 命令，在本地服務(wù)器上可視化圖表。

總結(jié)

這個(gè)圖表非常好地可視化了收入趨勢(shì)，使我們更容易清晰、有結(jié)構(gòu)地查看歷史數(shù)據(jù)與未來(lái)預(yù)測(cè)。要達(dá)到這個(gè)效果：

• 控制基于日期的 X 軸并使用準(zhǔn)確的日期格式；
• 使 Y 軸顯示以千單位的歐元（k€）以簡(jiǎn)化讀數(shù)；
• 最重要的一點(diǎn)是保持歷史數(shù)據(jù)最后一個(gè)點(diǎn)與預(yù)測(cè)數(shù)據(jù)第一個(gè)點(diǎn)相連，使過(guò)渡平滑；
• 實(shí)線(xiàn)用于過(guò)去收入，虛線(xiàn)用于預(yù)測(cè)收入，使視覺(jué)直觀(guān)；
• 標(biāo)記 “Today” 并微妙高亮預(yù)測(cè)期幫助用戶(hù)快速理解未來(lái)數(shù)據(jù)的起點(diǎn)。

LightningChart JS所提供的結(jié)構(gòu)化實(shí)現(xiàn)讓我們能夠創(chuàng)建一個(gè)強(qiáng)大、響應(yīng)迅速且高度精確的分析圖表。雖然 LC JS 與傳統(tǒng)的 JavaScript 或 jQuery 圖表不同，但其實(shí)現(xiàn)方式提供了一個(gè)更結(jié)構(gòu)化、易維護(hù)、模塊化的方案。

更多產(chǎn)品更新信息歡迎“”了解！

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專(zhuān)注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競(jìng)爭(zhēng)優(yōu)勢(shì)。

慧都科技是LightningChart的中國(guó)區(qū)的合作伙伴，LightningChart作為數(shù)據(jù)可視化領(lǐng)域的優(yōu)秀產(chǎn)品，通過(guò)高性能的GPU加速渲染技術(shù)，顯著提升企業(yè)在實(shí)時(shí)數(shù)據(jù)可視化與海量數(shù)據(jù)處理方面的效率，尤其適用于需要快速呈現(xiàn)和分析數(shù)十億數(shù)據(jù)點(diǎn)的場(chǎng)景。