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

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

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

它常用來：

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

項目概覽

要遵循這個JavaScript多圖表畫布項目，請下載包含所有必要資源的ZIP文件。

模板設(shè)置

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

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

3. 打開終端，運行 npm install 命令。

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

開始使用

建議您使用并更新到LightningChart JS 和 的最新版本，這是因為某些 LightningChart JS 的工具在舊版本中并不存在。在項目的 package.json 文件中可以看到 LightningChart JS 的依賴項：

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

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

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

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

2. 添加許可證 Key（免費）

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

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

Chart.ts（核心代碼部分）

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

import revenueData from './revenue.json';

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

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

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

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

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

配置 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è)置為使用DateTime刻度，這意味著它將顯示日期而不是普通數(shù)字。
• 光標(biāo)格式確保當(dāng)您將鼠標(biāo)懸停在一個點上時，它會顯示一個可讀的日期，如“2025年3月15日”，而不是一個不可讀的時間戳。

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 歐元會顯示為 “100 k€”。

將數(shù)據(jù)分為過去數(shù)據(jù)與預(yù)測數(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 是一個代表當(dāng)前日期的時間戳。
• 數(shù)據(jù)集被分為兩部分：
  • dataPast 包含時間戳 ≤ 當(dāng)前時間的歷史收入數(shù)據(jù)。
  • dataProjection 包含時間戳 > 當(dāng)前時間的預(yù)測收入數(shù)據(jù)。
• 為了使歷史數(shù)據(jù)到預(yù)測數(shù)據(jù)之間過渡平滑，把歷史數(shù)據(jù)的最后一個數(shù)據(jù)點放到預(yù)測數(shù)據(jù)的開頭，這防止圖形中出現(xiàn)突變。

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

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

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

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ù)測收入添加一個虛線系列。
• 虛線的筆觸樣式區(qū)別于實線，以便在視覺上區(qū)別預(yù)測與實際歷史數(shù)據(jù)。
• patternScale: 4 使虛線的段落（dash）更大、更容易區(qū)分。

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

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

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

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

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

初始化圖表

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

總結(jié)

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

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

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

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

關(guān)于慧都科技

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

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