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

翻译|使用教程|编辑:杨鹏连|2021-05-07 11:05:25.557|阅读 31 次

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

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

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交流群:740060302


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

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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat