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

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

虛線折線圖是一種折線圖，其中部分或全部線條用虛線代替實線。這種圖表是標準折線圖的一個變體，用于當涉及多個數據系列時讓圖表更清晰，或用來區分不同的信息類型（例如實際數據 vs. 預測數據）。

它常用來：

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

項目概覽

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

模板設置

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

2. 下載模板后，您會看到如下文件結構（file tree）。

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

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

開始使用

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

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

1. 導入類（Importing classes）

將從導入創建圖表所需的類開始。

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

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

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

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

Chart.ts（核心代碼部分）

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

import revenueData from './revenue.json';

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

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

創建帶有暗色主題的圖表

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

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

配置 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軸代表時間。
• 它將軸設置為使用DateTime刻度，這意味著它將顯示日期而不是普通數字。
• 光標格式確保當您將鼠標懸停在一個點上時，它會顯示一個可讀的日期，如“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 軸表示收入（歐元 €）。
• 不顯示原始數字，而是轉成“千歐元”的形式以保持干凈、易讀。
• 例如 100,000 歐元會顯示為 “100 k€”。

將數據分為過去數據與預測數據

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

創建實線與虛線的數據系列

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

• 為歷史收入添加一個實線系列。
• ProgressiveX 模式表示數據點按時間遞增。
• 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)

• 為預測收入添加一個虛線系列。
• 虛線的筆觸樣式區別于實線，以便在視覺上區別預測與實際歷史數據。
• patternScale: 4 使虛線的段落（dash）更大、更容易區分。

高亮預測期 & 添加 “Today” 標記

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

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

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

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

初始化圖表

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

總結

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

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

LightningChart JS所提供的結構化實現讓我們能夠創建一個強大、響應迅速且高度精確的分析圖表。雖然 LC JS 與傳統的 JavaScript 或 jQuery 圖表不同，但其實現方式提供了一個更結構化、易維護、模塊化的方案。

更多產品更新信息歡迎“”了解！

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都科技是LightningChart的中國區的合作伙伴，LightningChart作為數據可視化領域的優秀產品，通過高性能的GPU加速渲染技術，顯著提升企業在實時數據可視化與海量數據處理方面的效率，尤其適用于需要快速呈現和分析數十億數據點的場景。