LightningChart JS是Web上性能最高的圖表庫具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫。非常適合用于貿易，工程，航空航天，醫藥和其他領域的應用。

點擊下載LightningChart JS最新試用版

OHLC圖表

此示例顯示了使用OHLC系列的OHLC圖表的基本實現。

// 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() 可以用單個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應用于商業用途，歡迎。

關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼