LightningChart JS v5.1 版本包含新图表示例、新功能、可视化改进和 React 更新。

三维（3D）网格模型

我们推出了新的网格模型 3D 图表类型，用于以高性能渲染复杂的 3D 几何图形。三维网格模型使用调色板填充顶点值着色。下面是一些示例：

脑电图数据实时可视化的 3D 网格模型。

展示动态着色的 3D 网格模型。

条形图

我们新增了两种条形图：堆叠条形图和分组条形图。堆叠条形图在比较不同类别的总值时非常有用。在下一个示例中，我们可以看到移动操作系统的市场份额，并轻松直观地显示不同操作系统在过去几年中的份额。

JavaScript 叠加条形图

新功能

基于百分比的颜色查找表可自动将初始值/最小值（如 0）染成红色，将最终值/最大值（如 100）染成绿色，并将中间值染成红绿插值。

百分比 LUT 目前仅支持点序列、热图序列和曲面序列。我们目前建议将百分比 LUT 仅用于静态用例（而非实时数据更新）。

// Example use code
New PaletedFill ({
lut: new LUT({
steps: [
{ value: 0, color: ColorCSS(‘red’) },
{ value: 1, color: ColorCSS(‘green’) },
],
percentageValues: true,
interpolate: true,
}),
})

轴间隔限制 API（测试版）

此功能可限制轴间隔保持在指定的范围/限制内。这有助于

1. 防止缩放至可见数据集之外

2. 防止缩放超出阈值位置

3. 防止放大/缩小过大

使用轴间隔限制 API 功能有 3 种方法：

// Example 1, prevent zooming outside active data set
Axis.setIntervalRestrictions((state) => ({
startMin: state.dataMin,
endMax: state.dataMax,
}))
// Example 2, set max zoom in level (intervalMin)
Axis.setIntervalRestrictions({ intervalMin: 10 })
// Example 3, set max zoom out level (intervalMax)
Axis.setIntervalRestrictions({ intervalMax: 1000 })

轴默认时间间隔 API（测试版）

该功能与我们熟悉的 Axis.setInterval() 方法相同，但会记住配置，并在用户缩放至合适位置时恢复配置。 建议用于以编程方式配置 X/Y 轴或两个轴的默认视图的应用程序。例如

例如：

chart.getDefaultAxisX().setDefaultInterval({ start: 0, end: 100 })

建议在配置滚动轴时也使用此功能。这样，用户缩放拟合时将恢复原来的滚动轴间隔，而不是显示整个历史记录。

chart.getDefaultAxisX()
.setScrollStrategy(AxisScrollStrategies.progressive)
.setDefaultInterval(state => ({ end: state.dataMax, start: (state.dataMax ?? 0) – 10_000, stopAxisAfter: false }))

日期时间轴 - UTC 模式（测试版）

我们为数据时间轴添加了一个可选标记，可将刻度位置改为 UTC（通用时间坐标），而不是客户端的本地时区。这可用于忽略任何本地夏令时/时区差异，并确保无论在哪里查看，刻度的位置都是一样的。

需要注意的是，启用 UTC 模式不会自动更改标签格式，标签格式可能仍基于客户端的本地时区。

// Example code of using Intl.DateTimeFormat API for UTC formatting
const utcFormatter = new Intl.DateTimeFormat (undefined, {
})
timeZone: 'UTC',
hour: '2-digit',
minute: '2-digit',
hour12: false,
})
const unknown Timezone Formatter = (timestamp: number) => { 
return utcFormatter.format(timestamp)
}
chart
.getDefaultAxisX()
.setTickStrategy (AxisTickStrategies.DateTime, (ticks) =>
ticks
.setUTC(true)
.setFormatting(undefined, unknownTimezoneFormatter, unknownTimezoneFormatter) 
.setCursorFormatter (unknown TimezoneFormatter),
)

热图位置和缩放运行时修改

我们为所有静态和滚动热图及曲面系列添加了新方法：

• setStart

• setStep

• setEnd

以前，这些属性只能在创建系列时指定，之后就无法修改了。

改进 LUT 精度

根据用户的反馈，我们修复了在各种系列类型中使用 LUT 进行动态着色时的一些精度问题。

React更新

我们更新了使用LightningChart JS v.5.x新版本的React模板，并添加了使用React开发时的最佳实践和优化列表。更多信息，请访问 LCJS - React 框架文档。

@arction/react 时间序列图

我们现在推出 @arction/react-time-series-chart，它是一个功能强大的开源 React 组件，可用于交互式重载时间序列图。更多信息，请访问 GitHub。

开始使用LightningChart JS v.5.1

注册30天免费试用，开始使用LightningChart JS v.5.1。查看文档了解更多信息。

获取 LightningChart JS v.5.1 新版安装包>>