半岛外围网上直营

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加速渲染技术，显著提升企业在实时数据可视化与海量数据处理方面的效率，尤其适用于需要快速呈现和分析数十亿数据点的场景。