高效能圖表LightningChart JS 遷移指南介紹
LightningChartJS 是Web上效能最高的圖表庫具有出色的執行效能 - 使用高資料速率同時監控數十個資料來源。 GPU加速和WebGL渲染確保您的裝置的圖形處理器得到有效利用,從而實現高重新整理率和流暢的動畫。非常適合用於貿易,工程,航空航天,醫藥和其他領域的應用。
LightningChartJS 遷移指南
從1.3.1及以前的版本到2.0.0及以後的版本
線路集的改進
雖然這不是一個破壞相容性的變化,但我們覺得這值得在這裡強調。
我們改進了庫中粗線條的繪製,減少了約75%的記憶體使用,同時改善了線條的視覺效果。
軸的變化
在這個版本中,我們重構了我們的座標軸tick策略的工作方式,以允許更復雜的座標軸和更好的視覺風格。因此,tick策略的使用方式也有所改變。
- 增加了Axis.setTickStrategy( TickStrategy, (optional)tickStrategyMutator )。
- 這用於設定 Axis 的 Tick Strategies,以及 Tick Strategies 的樣式元素。
- 突變器是可選的,僅在樣式化或修改TickStrategy元素時使用。
- DateTime TickStrategy原點現在可以透過setter方法設定。
- 使用一個突變器來改變DateTime Tick策略的DateOrigin。
- Axis.setTickStrategy( AxisTickStrategies.DateTime, ( tickStrategy ) => {tickStrategy.setDateOrigin( dateOrigin ) })
目前,ticks已被分為三類不同的型別。
- 主要ticks
o 這些總是顯示出來。
o 它們代表了所示比例尺中的主要閾值。
- 小 ticks
o 預設顯示,可隱藏
o 適應於主要ticks之間
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_標準衍生產品
- OES_vertex_array_object(頂點陣列物件)
- WEBGL_lose_context
這些擴充套件在所有現代的桌面和移動瀏覽器中都已實現。如果這些擴充套件中的任何一個缺失,那麼將顯示一個可忽略的警告,以通知使用者可能不正確的工作功能。
你已經知道我們這樣做的原因了--PointSet的效能得到了顯著提升。
儀表板選項
簡化了Dashboard的建立。圖表選項不再作為一個單獨的選項物件分開。`columnSpan`和`rowSpan`現在是可選的選項,如果沒有定義值,則預設為1。
- 以前,Dashboard.createChartXY( { columnIndex: 0, rowIndex: 0, columnSpan: 1, rowSpan: 1, chartXYOptions: { theme.Themes.dark, ..: Themes.dark, ... } } )
- 現在,Dashboard.createChartXY( { columnIndex: 0, rowIndex.0, columnSpan: 1, rowSpan: 1,theme: theme: 0, columnSpan: 1, rowSpan: 1,theme: Themes.dark, ... } )
o 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)本身。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69995027/viewspace-2760652/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 高效能圖表控制元件LightningChart客戶使用感言控制元件GC
- 行遷移_行連結的介紹
- AngularJS 樣式指南介紹AngularJS
- webpack 4遷移指南Web
- Three.js開發指南(1):介紹JS
- DirectX圖形介面指南的介紹(轉)
- 高效能圖表控制元件LightningChart關於圖例框條目重疊問題解答控制元件GC
- 深度學習之遷移學習介紹與使用深度學習遷移學習
- 資料庫中跨平臺遷移方法介紹資料庫
- LightningChart -XY 2D圖表特性GC
- Excel圖表製作方法介紹Excel
- 表空間遷移
- 遷移表空間
- jCharts:Java圖表類庫使用介紹Java
- AFNetworking 3.0遷移指南
- js如何阻止表單提交簡單介紹JS
- ORACLE表批量遷移表空間Oracle
- Oracle分割槽表遷移Oracle
- oracle 表遷移方法 (一)Oracle
- 大表exp/imp遷移
- 【遷移】表空間transport
- 分割槽表分批遷移
- RMAN遷移表空間
- Flutter Android 1.12 遷移指南FlutterAndroid
- Gradle Kotlin DSL遷移指南GradleKotlin
- Dart 2 Web 應用遷移指南DartWeb
- iOS Core Data 資料遷移 指南iOS
- WordPress 遷移外掛終極指南
- MySQL表與表之間的SQL Joins圖介紹MySql
- Elasticsearch 參考指南(介紹)Elasticsearch
- JSON 介紹JSON
- DuelJS 介紹JS
- JsDoc 介紹JS
- Pyjs介紹JS
- jsoncpp 介紹JSON
- ORACLE索引與高效能SQL介紹Oracle索引SQL
- 遷移表到新的表空間
- 【資料遷移】使用傳輸表空間遷移資料