翻譯|使用教程|編輯:楊鵬連|2021-05-07 11:05:25.557|閱讀 300 次
概述:本文詳細(xì)介紹了LightningChart JS從2.2.1版到3.0.0版的遷移指南。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
LightningChart JS是Web上性能最高的圖表庫(kù)具有出色的執(zhí)行性能 - 使用高數(shù)據(jù)速率同時(shí)監(jiān)控?cái)?shù)十個(gè)數(shù)據(jù)源。 GPU加速和WebGL渲染確保您的設(shè)備的圖形處理器得到有效利用,從而實(shí)現(xiàn)高刷新率和流暢的動(dòng)畫(huà)。非常適合用于貿(mào)易,工程,航空航天,醫(yī)藥和其他領(lǐng)域的應(yīng)用。
點(diǎn)擊下載LightningChart JS最新試用版
ChartXY.addAxisX/Y
addAxis方法的參數(shù)已經(jīng)改變。如果你以前沒(méi)有提供參數(shù),那么使用方法
沒(méi)有改變。
在3.0之前,有一個(gè)單一的addTop布爾參數(shù)。遷移到3.0后,要像下面這樣遷移它。
3.0之前的用法:
Chart.addAxisX(true)3.0之后的用法:
Chart.addAxisX({ opposite: true })規(guī)模變化
UI元素的自定義比例變化
涉及到以下方法。
- Chart.addUIElement
- Chart.addLegendBox
- Dashboard.addUIElement
- Dashboard.addLegendBox
變化只適用于第二個(gè)參數(shù),刻度。這個(gè)參數(shù)過(guò)去和現(xiàn)在都是可選的--如果你
如果你沒(méi)有使用它,或者提供了未定義的參數(shù),就沒(méi)有必要進(jìn)行修改。
在軸值上定位UI元素
以前版本的語(yǔ)法:
chart.addUIElement(UIElementBuilders.TextBox, { x: xAxis.scale, y: yAxis.scale })LCJS v3.0的語(yǔ)法:
chart.addUIElement(UIElementBuilders.TextBox, { x: xAxis, y: yAxis })將UI元素定位在不同的X和Y刻度上
以前版本的語(yǔ)法
chart.addUIElement(UIElementBuilders.TextBox, { x: chart.uiScale.x, y: chart.pixelScale.y })LCJS v3.0的語(yǔ)法
chart.addUIElement(UIElementBuilders.TextBox, { x: chart.uiScale, y: chart.pixelScale })刪除了Axis屬性
屬性 遷移說(shuō)明
getTickStyle() 默認(rèn)的軸刻度樣式可以通過(guò)以下方式查詢(xún)
Themes.dark.numericTickStrategy
plottingScale 用軸本身代替,見(jiàn) "在軸值上定位UI
元素在軸值上的位置"
heightScale 使用軸本身,見(jiàn) "在軸的數(shù)值上定位UI元素"。
元素在軸值上的定位"
Axis.scale
Axis.scale屬性已被刪除。
屬性 遷移說(shuō)明
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()
沒(méi)有直接替換。如果你從Arction的例子中復(fù)制了這個(gè)用法
如果你從Arction的例子中復(fù)制了用法,請(qǐng)參考該例子以了解最新用法。
最新的用法。
Axis.scale.getCellSize()
沒(méi)有直接替換。如果你從Arction的例子中復(fù)制了這個(gè)用法從Arction的例子中復(fù)制了
將軸坐標(biāo)翻譯成其他坐標(biāo)系,以及其他方式的翻譯
translatePoint現(xiàn)在接受Axis對(duì)象,而不是以前使用Axis.scale的方式。
將軸坐標(biāo)轉(zhuǎn)換為像素的用法示例。
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
- 儀表盤(pán).uiScale
- 儀表盤(pán).引擎.比例
- Series.scale
所有這些屬性的API已經(jīng)被移除。
屬性遷移說(shuō)明
uiScale getInnerStart()等于0,getInnerEnd()等于100。
Series.scale 使用Axis.getInterval()代替。
getCellSize() 沒(méi)有直接替換。如果你從Arction的例子中復(fù)制了這個(gè)用法,如果你從Arction的例子中復(fù)制了用法,請(qǐng)參考該例子以了解最新用法。
getPixelSize() 沒(méi)有直接替換。如果你從Arction的例子中復(fù)制了這個(gè)用法
如果你從Arction的例子中復(fù)制了用法.
數(shù)據(jù)模式(DataPattern)
DataPattern API的語(yǔ)法已經(jīng)改變?,F(xiàn)在它使用了更靈活的對(duì)象參數(shù)。新的
選項(xiàng) regularProgressiveStep 已被添加到更多特定應(yīng)用的優(yōu)化中。
LCJS v2.2.1:
const lineSeries = ChartXY.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })LCJS v3.0.0:
const lineSeries = ChartXY.addLineSeries({ dataPattern: { // pattern: 'ProgressiveX' => 每個(gè)連續(xù)的數(shù)據(jù)點(diǎn)有 增加的X坐標(biāo)。 pattern: 'ProgressiveX', // regularProgressiveStep: false => 每個(gè)連續(xù)的數(shù)據(jù)點(diǎn)之間的X步長(zhǎng)是不規(guī)則的。 連續(xù)的數(shù)據(jù)點(diǎn)之間的X步長(zhǎng)是不規(guī)則的。 regularProgressiveStep: false, } })在以前的版本中,dataPattern還選擇了解決離鼠標(biāo)最近的數(shù)據(jù)點(diǎn)的基礎(chǔ)
const lineSeries = ChartXY.addLineSeries() .setCursorSolveBasis('nearest-x')支持的值是'nearest-x'、'nearest-y'和'nearest'。
圖例框的變化
圖例框標(biāo)題
以前的行為。LegendBox的標(biāo)題被自動(dòng)設(shè)置為與圖表的標(biāo)題一致
新的行為。默認(rèn)情況下,LegendBox的標(biāo)題是空的。用LegendBox.setTitle( 'My title')來(lái)設(shè)置。
LegendBox.add參數(shù)變化
點(diǎn)擊時(shí)處置
以前的語(yǔ)法。LegendBox.add( component, false )
3.0的語(yǔ)法。LegendBox.add( component, { disposeOnClick: false } )
標(biāo)簽
以前的語(yǔ)法。LegendBox.add( component, undefined, 'Group tag' )
3.0: 沒(méi)有直接替換。要給LegendBox添加標(biāo)題,請(qǐng)使用LegendBox.setTitle('Group tag')
建設(shè)者
以前的語(yǔ)法。LegendBox.add( component, undefined, undefined, entryBuilder )
3.0的語(yǔ)法。LegendBox.add( component, { builder: entryBuilder } )
對(duì)LegendBoxEntries樣式的修改
以前的語(yǔ)法
const entries = LegendBox.add( chart) entries.forEach(entry => entry.setTextFillStyle( ...))3.0的語(yǔ)法。
LegendBox.add( chart).setEntries( entry => entry.setTextFillStyle( ... ) )UILegendBoxPanel
add()
系列或其他可附件不再能直接添加到 legendBox 面板。只有整個(gè)圖表。
或包含一個(gè)或多個(gè)圖表的儀表板可以被添加。
標(biāo)題
legendBox面板不再有一個(gè)內(nèi)置的標(biāo)題組件。一個(gè)自定義的標(biāo)題可以用
UILegendBoxPanel.addUIElement
每個(gè)附加的圖表都有自己內(nèi)部創(chuàng)建的LegendBox,每個(gè)LegendBox也有一個(gè)可配置的標(biāo)題
移除的方法
- UILegendBoxPanel.setTitle
- UILegendBoxPanel.getTitle
- UILegendBoxPanel.setTitleFillStyle
- UILegendBoxPanel.getTitleFillStyle
- UILegendBoxPanel.setTitleFont
- UILegendBoxPanel.getTitleFont
SetEntries()
圖例框條目現(xiàn)在被分組到獨(dú)立的圖例框中,按圖表分組。要訪(fǎng)問(wèn)
要訪(fǎng)問(wèn)圖例框面板內(nèi)的圖例框條目,請(qǐng)使用UILegendBoxPanel.setLegendBoxes。
自定義刻度變化
CustomTick.setTopPadding已改名為setTickLabelPadding
PointableTextBox重命名為UIPointableTextBox
CustomTick.setPaddingBottom和CustomTick.setSidePaddings已被刪除。它們可以通過(guò)CustomTick Marker background(如果刻度線(xiàn)有背景)來(lái)訪(fǎng)問(wèn)。
CustomTick.setMarker((tickMarker: UIPointableTextBox) => tickMarker .setBackground((background) => background .setPadding({ // 填充底部 bottom:10, // 側(cè)面的填充物 left: 20, right: 20 }) ) )一般性修改
- 刪除了PointSeriesOptions3D.pointShape。使用PointSeries3D.setPointStyle代替。
- 刪除了PointLineSeriesOptions3D.pointShape。使用PointLineSeries3D.setPointStyle來(lái)代替。
- 刪除了Theme.numericTickStrategy3D。請(qǐng)使用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重命名為T(mén)heme.seriesBackgroundFillStyle。
- Theme.chartBackgroundStrokeStyle重命名為T(mén)heme.seriesBackgroundStrokeStyle
如果您對(duì)該圖表控件感興趣,歡迎加入圖表控件QQ交流群:740060302
如果你想LightningChart JS應(yīng)用于商業(yè)用途,歡迎。
關(guān)注下方的微信公眾號(hào),及時(shí)獲取產(chǎn)品最新資訊▼▼▼
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn