彩票走势图

JavaScript可视化图表库LightningChart JS迁移指南

翻译|使用教程|编辑:杨鹏连|2020-11-04 11:47:54.770|阅读 177 次

概述:我们改进了库中粗线条的绘制,减少了约75%的内存使用,同时改善了线条的视觉效果。LightningChartJS 从1.3.1及以前的版本到2.0.0及以后的版本的迁移指南。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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

点击下载LightningChart JS最新试用版

相关推荐:

JavaScript可视化图表库LightningChart JS最新版安装教程

JavaScript可视化图表库LightningChart JS入门第一步

LightningChartJS 迁移指南

从1.3.1及以前的版本到2.0.0及以后的版本。

LineSet改进

虽然这不是一个破坏兼容性的变化,但我们认为这值得在此强调。

我们改进了库中粗线条的绘制,减少了约75%的内存使用,同时改善了线条的视觉效果。

轴的变化

在这个版本中,我们重构了我们的坐标轴tick策略的工作方式,以允许更复杂的坐标轴和更好的视觉风格。因此,tick策略的使用方式也发生了变化。

- 增加了Axis.setTickStrategy( TickStrategy, (optional)tickStrategyMutator )。
o 这用于设置 Axis 的 Tick Strategies,以及 Tick Strategies 的样式元素。
o 突变器是可选的,仅在样式化或修改TickStrategy元素时使用。

- DateTime TickStrategy原点现在可以通过setter方法设置。
o 使用一个突变器来改变DateTime Tick策略的DateOrigin。
o Axis.setTickStrategy( AxisTickStrategies.DateTime, ( tickStrategy ) => {
tickStrategy.setDateOrigin( dateOrigin ) }。)

轴刻度现在被分成三种不同的类别:

- 主要事项
o 这些总是显示出来。
o 它们代表了所示比例尺中的主要阈值。

- 小刻度

o 默认显示,可隐藏
o 在主要刻度之间匹配
o 如果标签可以容纳而不与其他标签重叠,则显示标签。
* 否则只显示部分或不显示。
勾线和网格线的显示不受影响

- 大ticks

o 与DateTime Tick策略一起使用。
o 显示的是大的阈值(如日期中的年数)。
o 可以隐藏

- 极端ticks

o 默认情况下是隐藏的,可以启用。
o 显示在轴线的两端。
o 有助于始终显示一个轴的当前极端值。

不同的tick可以通过使用Axis.setTickStrategy()方法,通过使用可选的tickStrategyMutator来实现风格化。

- Axis.setTickStrategy( TickStrategy, ( mutator ) => { mutator.setMajorTickStyle( (tickStyle) => { tickStyle.setGridStrokeStyle( ... ) }。) } )

AxisTickStrategies.NumericWithUnits(数字单位)

NumericWithUnits TickStrategy已被删除。通过使用Numeric TickStrategy及其setFormattingFunction()方法可以实现同样的功能。

从图表/轴的创建中删除了默认的轴刻度线策略

旧的行为:

- 在创建图表时

LightningChart.ChartXY( { defaultAxisXTickStrategy.DateTime() }。AxisTickStrategies.DateTime() }。)

- 在创建Axis时。
ChartXY.addAxisX( undefined, AxisTickStrategies.DateTime())
新行为。

- 在创建图表时
LightningChart.ChartXY().setTickStrategy( AxisTickStrategies.DateTime )

- 在创建Axis时。

ChartXY.addAxisX().setTickStrategy( AxisTickStrategies.DateTime )

WebGL扩展要求

LightningChart JS现在需要以下WebGL扩展才能正常工作。

  • ANGLE_instanced_arrays
  • EXT_blend_minmax
  • OES_element_index_uint.
  • OES_standard_derivatives
  • OES_vertex_array_object(顶点阵列对象)
  • WEBGL_lose_context
这些扩展在所有现代的桌面和移动浏览器中都已实现。如果这些扩展中的任何一个缺失,那么将显示一个可忽略的警告,以通知用户可能不正确的工作功能。


你已经知道我们这样做的原因了--PointSet的性能得到了显著提升。

仪表板选项

简化了Dashboard的创建。图表选项不再作为一个单独的选项对象分开。`columnSpan`和`rowSpan`现在是可选的选项,如果没有定义值,则默认为1。

  • Previously:Dashboard.createChartXY( { columnIndex: 0, rowIndex: 0, columnSpan: 1, rowSpan:1, chartXYOptions: { theme.Themes.dark, ..: Themes.dark, ... } } )
  • Now:Dashboard.createChartXY( { columnIndex: 0, rowIndex.0, columnSpan: 1, rowSpan: 1,theme: theme: 0, columnSpan: 1, rowSpan: 1,theme: Themes.dark, ... } )
 ColumnSpan和RowSpan现在是可选的,如果没有给定值,将默认为1。

requestAnimationFrame和cancelAnimationFrame的Polyfills

1.3.1版本及之前,我们已经为这些功能添加了自己的polyfills。从2.0.0版本开始,开发者需要为这些功能添加自己的polyfills。可以使用一个库,如 requestAnimationFrame polyfill 库来实现这个功能。这是为了遵循库中多边填充的最佳实践而改变的。ColorHEX的变化

我们改变了ColorHEX方法中的值的顺序(以前是#ARGB, #AARRGGBB),以对应CSS形式的#RGBA / #RRGGBBAA。

删除过时的API

  • 移除SolidGauge.setDataLabelFormater -> 使用SolidGauge.setDataLabelFormatter。
  • 移除SolidGauge.getDataLabelFormater -> 使用SolidGauge.getDataLabelFormatter。
  • setChartBackgroundStroke移除 -> 使用setChartBackgroundStrokeStyle。
  • getChartBackgroundStroke移除 -> 使用getChartBackgroundStrokeStyle。
  • setMaxPointsCount删除 -> 使用setMaxPointCount。
  • containerId引擎选项被删除 -> 使用容器引擎选项代替。这允许通过像之前一样将containerId作为一个字符串,或者只是传递container(div)本身。


想要购买LightningChart JS正版授权,或了解更多产品信息请点击


标签:

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


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP