LightningChart JS是Web上性能最高的圖表庫(kù)具有出色的執(zhí)行性能 - 使用高數(shù)據(jù)速率同時(shí)監(jiān)控?cái)?shù)十個(gè)數(shù)據(jù)源。 GPU加速和WebGL渲染確保您的設(shè)備的圖形處理器得到有效利用，從而實(shí)現(xiàn)高刷新率和流暢的動(dòng)畫。非常適合用于貿(mào)易，工程，航空航天，醫(yī)藥和其他領(lǐng)域的應(yīng)用。

點(diǎn)擊下載LightningChart JS最新試用版

OHLC圖表

此示例顯示了使用OHLC系列的OHLC圖表的基本實(shí)現(xiàn)。

// OHLCSeries exists inside XY-charts.
const chart = lightningChart().ChartXY()
const ohlcSeries = chart.addOHLCSeries(
    // Specify type of figure used
    { positiveFigure: OHLCFigures.Bar }
)

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() 可以用單個(gè)XOHLC對(duì)象或它們的數(shù)組調(diào)用。

條形圖的解剖

條形圖由三個(gè)線段組成，可以使用單個(gè)LineStyle對(duì)象設(shè)置樣式。

圖形樣式

OHLC系列提供了分別指定正和負(fù)燭臺(tái)樣式的功能。

// 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應(yīng)用于商業(yè)用途，歡迎。

關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼