翻譯|使用教程|編輯:吳園園|2020-04-08 16:36:58.593|閱讀 290 次
概述:此示例顯示了使用OHLC系列的OHLC圖表的基本實現。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
LightningChart JS是Web上性能最高的圖表庫具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用,從而實現高刷新率和流暢的動畫。非常適合用于貿易,工程,航空航天,醫藥和其他領域的應用。

OHLC圖表
此示例顯示了使用OHLC系列的OHLC圖表的基本實現。
// OHLCSeries exists inside XY-charts.
const chart = lightningChart().ChartXY()
const ohlcSeries = chart.addOHLCSeries(
// Specify type of figure used
{ positiveFigure: OHLCFigures.Bar }
)
OHLC系列接受接口“ XOHLC”形式的數據:
const xohlc = [
// X-position
0,
// Opening Y-value
100,
// Highest Y-value
200,
// Lowest Y-value
50,
// Closing Y-value
75
]
// Add new segment to series.
ohlcSeries.add(xohlc)
add() 可以用單個XOHLC對象或它們的數組調用。
條形圖的解剖
條形圖由三個線段組成,可以使用單個LineStyle對象設置樣式。
圖形樣式
OHLC系列提供了分別指定正和負燭臺樣式的功能。
// Width of both positive and negative candlesticks
const figureWidth = 5.0
// Green color filling
const fillStylePositive = new SolidFill()
.setColor( ColorRGBA( 0, 128, 0 ) )
// Lime color filling
const fillStyleHighlightPositive = new SolidFill()
.setColor( ColorRGBA (0, 255, 0) )
// Black color stroke
const bodyStrokeStyle = new SolidLine()
.setFillStyle( new SolidFill().setColor( ColorRGBA( 0, 0, 0 ) ) )
.setThickness( 1.0 )
// Green color stroke
const strokeStylePositive = new SolidLine()
.setFillStyle( new SolidFill().setColor( ColorRGBA( 0, 128, 0 ) ) )
// Lime color stroke
const strokeStylePositiveHighlight = new SolidLine()
.setFillStyle( new SolidFill().setColor( ColorRGBA( 0, 240, 0 ) ) )
ohlcSeries
// Setting width of figures
.setFigureWidth ( figureWidth )
// Styling positive candlestick
.setPositiveStyle ( ( candlestick ) => candlestick
// Candlestick body fill style
.setBodyFillStyle( fillStylePositive )
// Candlestick body fill style when highlighted
.setBodyFillStyleHighlight( fillStyleHighlightPositive )
// Candlestick body stroke style
.setBodyStrokeStyle( bodyStrokeStyle )
// Candlestick stroke style
.setStrokeStyle( strokeStylePositive )
// Candlestick stroke style when highlighted
.setStrokeStyleHighlight( strokeStylePositiveHighlight )
)
// Styling negative candlestick
.setNegativeStyle( ( candlestick ) => candlestick
// etc ...
)
=====================================================
如果你想LightningChart JS應用于商業用途,歡迎。
關注下方的微信公眾號,及時獲取產品最新資訊▼▼▼
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: