LightningChart JS从2.2.1版到3.0.0版迁移指南

本文详细介绍了LightningChart JS从2.2.1版到3.0.0版的迁移指南。

LightningChart JS是Web上性能最高的图表库具有出色的执行性能 – 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用，从而实现高刷新率和流畅的动画。非常适合用于贸易，工程，航空航天，医药和其他领域的应用。

LightningChart JS最新试用版

ChartXY.addAxisX/Y

addAxis方法的参数已经改变。如果你以前没有提供参数，那么使用方法
没有改变。

在3.0之前，有一个单一的addTop布尔参数。迁移到3.0后，要像下面这样迁移它。
3.0之前的用法:

Chart.addAxisX(true)

3.0之后的用法:

Chart.addAxisX({ opposite: true })

规模变化

UI元素的自定义比例变化
涉及到以下方法。
– Chart.addUIElement
– Chart.addLegendBox
– Dashboard.addUIElement
– Dashboard.addLegendBox
变化只适用于第二个参数，刻度。这个参数过去和现在都是可选的–如果你
如果你没有使用它，或者提供了未定义的参数，就没有必要进行修改。

在轴值上定位UI元素

以前版本的语法:

chart.addUIElement(UIElementBuilders.TextBox, { x: xAxis.scale, y: yAxis.scale })

LCJS v3.0的语法:

chart.addUIElement(UIElementBuilders.TextBox, { x: xAxis, y: yAxis })

将UI元素定位在不同的X和Y刻度上

以前版本的语法

chart.addUIElement(UIElementBuilders.TextBox, { x: chart.uiScale.x, y: chart.pixelScale.y })

LCJS v3.0的语法

chart.addUIElement(UIElementBuilders.TextBox, { x: chart.uiScale, y: chart.pixelScale })

删除了Axis属性

属性 迁移说明
getTickStyle() 默认的轴刻度样式可以通过以下方式查询
Themes.dark.numericTickStrategy
plottingScale 用轴本身代替，见 “在轴值上定位UI
元素在轴值上的位置”
heightScale 使用轴本身，见 “在轴的数值上定位UI元素”。
元素在轴值上的定位”

Axis.scale
Axis.scale属性已被删除。
属性 迁移说明
Axis.scale.getInnerStart() Axis.getInterval().start
Axis.scale.getInnerEnd() Axis.getInterval().end
Axis.scale.getInnerInterval() Math.abs(Axis.getInterval().end-)
Axis.getInterval().start)
Axis.scale.getPixelSize()
没有直接替换。如果你从Arction的例子中复制了这个用法
如果你从Arction的例子中复制了用法，请参考该例子以了解最新用法。
最新的用法。

Axis.scale.getCellSize()

没有直接替换。如果你从Arction的例子中复制了这个用法从Arction的例子中复制了

将轴坐标翻译成其他坐标系，以及其他方式的翻译
translatePoint现在接受Axis对象，而不是以前使用Axis.scale的方式。
将轴坐标转换为像素的用法示例。

const pixelLocation = translatePoint( // axis coordinate. { x: 116.9, y: 26.4 }, { x: chart.getDefaultAxisX(), y: chart.getDefaultAxisY(), }, chart.pixelScale )

删除了Scale API

涉及到以下属性
– Chart.uiScale
– Chart.pixelScale
– Chart.engine.scale
– 仪表盘.uiScale
– 仪表盘.引擎.比例
– Series.scale

所有这些属性的API已经被移除。
属性迁移说明
uiScale getInnerStart()等于0，getInnerEnd()等于100。
Series.scale 使用Axis.getInterval()代替。
getCellSize() 没有直接替换。如果你从Arction的例子中复制了这个用法,如果你从Arction的例子中复制了用法，请参考该例子以了解最新用法。
getPixelSize() 没有直接替换。如果你从Arction的例子中复制了这个用法
如果你从Arction的例子中复制了用法.

数据模式(DataPattern)

DataPattern API的语法已经改变。现在它使用了更灵活的对象参数。新的
选项 regularProgressiveStep 已被添加到更多特定应用的优化中。
LCJS v2.2.1:

const lineSeries = ChartXY.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive})

LCJS v3.0.0:

const lineSeries = ChartXY.addLineSeries({ dataPattern: { // pattern: 'ProgressiveX' => 每个连续的数据点有增加的X坐标。 pattern: 'ProgressiveX', // regularProgressiveStep: false => 每个连续的数据点之间的X步长是不规则的。连续的数据点之间的X步长是不规则的。 regularProgressiveStep: false, }})

在以前的版本中，dataPattern还选择了解决离鼠标最近的数据点的基础
的光标功能。这个功能已经被转移到一个专门的API，游标求解基础。
可以为LineSeries, PointLineSeries, SplineSeries和StepSeries设置。

const lineSeries = ChartXY.addLineSeries() .setCursorSolveBasis('nearest-x')

支持的值是’nearest-x’、’nearest-y’和’nearest’。

图例框的变化

图例框标题

以前的行为。LegendBox的标题被自动设置为与图表的标题一致
新的行为。默认情况下，LegendBox的标题是空的。用LegendBox.setTitle( ‘My title’)来设置。

LegendBox.add参数变化
点击时处置
以前的语法。LegendBox.add( component, false )
3.0的语法。LegendBox.add( component, { disposeOnClick: false } )
标签
以前的语法。LegendBox.add( component, undefined, ‘Group tag’ )
3.0: 没有直接替换。要给LegendBox添加标题，请使用LegendBox.setTitle(‘Group tag’)
建设者
以前的语法。LegendBox.add( component, undefined, undefined, entryBuilder )
3.0的语法。LegendBox.add( component, { builder: entryBuilder } )
对LegendBoxEntries样式的修改
以前的语法

const entries = LegendBox.add( chart)entries.forEach(entry => entry.setTextFillStyle( ...))

3.0的语法。

LegendBox.add( chart).setEntries( entry => entry.setTextFillStyle( ... ))

UILegendBoxPanel

add()
系列或其他可附件不再能直接添加到 legendBox 面板。只有整个图表。
或包含一个或多个图表的仪表板可以被添加。

标题
legendBox面板不再有一个内置的标题组件。一个自定义的标题可以用
UILegendBoxPanel.addUIElement
每个附加的图表都有自己内部创建的LegendBox，每个LegendBox也有一个可配置的标题
移除的方法
– UILegendBoxPanel.setTitle
– UILegendBoxPanel.getTitle
– UILegendBoxPanel.setTitleFillStyle
– UILegendBoxPanel.getTitleFillStyle
– UILegendBoxPanel.setTitleFont
– UILegendBoxPanel.getTitleFont

SetEntries()

图例框条目现在被分组到独立的图例框中，按图表分组。要访问
要访问图例框面板内的图例框条目，请使用UILegendBoxPanel.setLegendBoxes。

自定义刻度变化

CustomTick.setTopPadding已改名为setTickLabelPadding
PointableTextBox重命名为UIPointableTextBox
CustomTick.setPaddingBottom和CustomTick.setSidePaddings已被删除。它们可以通过CustomTick Marker background（如果刻度线有背景）来访问。

CustomTick.setMarker((tickMarker: UIPointableTextBox) => tickMarker .setBackground((background) => background .setPadding({ // 填充底部bottom:10, // 侧面的填充物 left: 20, right: 20 }) ))

一般性修改

– 删除了PointSeriesOptions3D.pointShape。使用PointSeries3D.setPointStyle代替。
– 删除了PointLineSeriesOptions3D.pointShape。使用PointLineSeries3D.setPointStyle来代替。
– 删除了Theme.numericTickStrategy3D。请使用Theme.numericTickStrategy代替。
– 删除了Theme.dateTickStrategy3D。使用Theme.dateTimeTickStrategy代替。
– ResultTable.setFont重命名为setTextFont。
– UITextBox.setFont重命名为setTextFont。
– UICheckBox.setFont重命名为setTextFont。
– LegendBoxEntry.setFont重命名为setTextFont
– setChartBackgroundFillStyle方法改名为setSeriesBackgroundFillStyle
– getChartBackgroundFillStyle方法重命名为getSeriesBackgroundFillStyle
– setChartBackgroundStrokeStyle方法改名为setSeriesBackgroundStrokeStyle
– getChartBackgroundStrokeStyle方法重命名为getSeriesBackgroundStrokeStyle。
– on/offChartBackground…事件方法重命名为on/offSeriesBackground…
– setResultTableFormatter重命名为setCursorResultTableFormatter
– getResultTableFormatter重命名为getCursorResultTableFormatter。
– Theme.chartBackgroundFillStyle重命名为Theme.seriesBackgroundFillStyle。
– Theme.chartBackgroundStrokeStyle重命名为Theme.seriesBackgroundStrokeStyle

如果您对该图表控件感兴趣，欢迎加入图表控件QQ交流群：

如果你想LightningChart JS应用于商业用途，欢迎咨询在线客服。

关注下方的微信公众号，及时获取产品最新资讯▼▼▼

来源：慧都