用NodeJS创建一个毫秒级精度的时间刻度图
你将用NodeJS和LightningChart JS创建一个互动和实时的时间刻度图。这个图表具有超高精度的缩放级别，最高可达毫秒。
这一次，我将指导你如何使用NodeJS和lcjs库创建一个时间刻度图。
在图表中放置和格式化自动轴刻度有几种选择。在这种情况下，我们使用LightningChart JS库中的TimeTickStrategy。
这个功能是为描绘毫秒级的时间戳数据而设计的，具有极高的分辨率、灵活性和性能。
TimeTickStrategy的有效范围从最大的100小时开始，一直到单个毫秒级别的渲染。
因此，在现实世界的用例场景中，这个图表是专门为那些需要在非常低的缩放级别上实现数据可视化的行业设计的--例如，将8小时、1小时、1分钟、1秒甚至1毫秒的数据点可视化。
对于这整个范围，刻度线标签是动态格式化的，以所有要求的精度显示当前相关的精度。
一些受益于此的行业将是交易、实时监测、研究、工程，甚至音频和振动分析。
说到这，让我们来设置我们的项目模板。
设置我们的模板
- 为了遵循这篇文章，你最好是下载项目模板。该模板是一个RAR文件，你可以在这里下载时间刻度图项目模板。
- 下载后，请在Visual Studio Code中打开该文件夹。然后，你会看到一个像这样的文件树。
- 现在，打开一个新的终端。
- 而且，在NodeJS项目中，像往常一样，我们将不得不运行我们的NPM安装命令。
这将是我们初始设置的一切。
让我们来编写代码。
CHART.ts
在这个文件中，我们将拥有创建图表、配置动画和格式化数据所需的所有逻辑。
1.声明常量lcjs，它将指的是设置 @arction/lcjs库。
2.从lcjs中提取所需的类。
JavaScript
// Import LightningChartJS
const lcjs = require('@arction/lcjs')
// Extract required parts from LightningChartJS.
const {
lightningChart,
AxisTickStrategies,
Themes
} = lcjs
3.接下来，我们将开始创建图表对象。
JavaScript
const chart = lightningChart()
.ChartXY({
theme: Themes.cyberSpace,
})
.setTitle('TimeTickStrategy example')
.setPadding({ right: 40 })
.setMouseInteractionsWhileScrolling(true)
那么，下面我们来简单解释一下这些属性的作用。
- setMouseInteractionWhileScrolling。 这决定了在图表系列的滚动动画中，鼠标和光标的交互是否应该被禁用。
参数
- 状态: 布尔型。如果鼠标和光标的交互在滚动动画中被禁用，则设置为True，否则为False。
- 返回这个: 流畅接口的图表本身。
- Theme： 它指的是默认实现的集合，可以通过Themes访问。组件的颜色主题必须在创建时指定，之后就不能再改变了（如果不破坏并不得不重新创建组件的话）。你可以在这里阅读更多关于主题的信息。
4.createProgressiveTraceGenerator。
这个属性用默认值创建一个新的采样数据发生器。这意味着生成器将以特定的频率对给定的输入数据阵列进行采样。请看下面的代码。
JavaScript
const {
createProgressiveTraceGenerator
} = require('@arction/xydata')
5.getDefaultAxisY
这个属性将检索Y轴。
setScrollStrategy:指定轴的滚动策略。这决定了轴的滚动位置是基于当前的视图和系列的边界。
6. getDefaultAxisX: 这个属性将检索X轴。
setTickStrategy: TickStrategy定义了轴刻度的定位和格式化逻辑，以及创建刻度的样式。 脚本
const axisX = chart
.getDefaultAxisX()
// Enable TimeTickStrategy for X Axis.
.setTickStrategy(AxisTickStrategies.Time)
const axisY = chart.getDefaultAxisY()
7. addLineSeries:这 是一个向图表中添加新的线型系列的方法。简而言之，线型系列所做的是用连续的笔画将给定的坐标（X和Y点）的列表可视化。
值得一提的是，LineSeries为可视化大量的数据进行了充分的优化，抓住了lcjs库的GPU加速能力。
然而，最终呈现的数据量将取决于LineSeries类型。LightningChart JS支持静态、刷新和追加的线图。
例如，在测试静态线状图可视化1000万个数据点时，加载速度只有330毫秒。
另一方面，刷新折线图以10 FPS的速度处理100万个数据点，仅使用57.6%的CPU资源。而对于追加折线图，每秒追加100万个数据点，只用了23.7%的CPU资源，速度为60 FPS。
因此，LineSeries的性能将取决于你的应用要求，但该组件主要是一个面向性能的组件。
如果你想了解更多关于LineSeries性能的最新情况，请访问LineSeries性能比较。
JavaScript
const series = chart.addLineSeries({
dataPattern: {
pattern: 'ProgressiveX',
},
})
8.addLegendBox： 该属性为图表添加一个方框。这个盒子具有隐藏和显示数据系列的功能。
JavaScript
const legend = chart.addLegendBox().add(chart)
// 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.30,
})
9.numberOfPoints:这 个属性设置了要在图表中显示的点的数量。如果你决定使用较小的值，图表看起来会简化。
我将我的例子设置为： const numberOfPoints = 1 * 10
JavaScript
// Generate ~8 hours of data for line series.
const numberOfPoints = 1 * 10
// TimeTickStrategy interprets values as milliseconds (UNIX timestamp).
const xInterval = 80 * 60 * 60 * 1000
createProgressiveTraceGenerator()
.setNumberOfPoints(numberOfPoints)
.generate()
.toPromise()
.then((data) => {
data = data.map((p) => ({
x: (p.x * xInterval) / numberOfPoints,
y: p.y,
}))
series.add(data)
})
NPM启动
最后，你只需要运行npm start命令，就可以在本地服务器中实现时间刻度图的可视化。
运行 "npm start"，你就可以进入你的本地服务器了。
最后的话
TimeTicksStrategy是一个强大的属性，它允许你渲染精确到毫秒的数据。在处理高频数据时，或者需要显示非常精确的时间信息时，这一点特别有用。
这使得 TimeTicksStrategy 对于那些在实时可视化数百万数据点时需要全精度渲染的应用，如金融或科学应用，是一个理想的功能。
通过TimeTicksStrategy属性，你可以确保你的数据被准确和有效地渲染。
所以，对于那些需要在很短的时间内跟踪数据的开发者来说，这绝对是一个有用的功能，比如在监控计算机进程或网络活动时。
如果你在图表中需要这种级别的细节，那么线列图绝对值得考虑。
谢谢!
