JavaScript图表库LightningChart JS交互示例：OHLC图表-控件新闻-慧都网

JavaScript图表库LightningChart JS交互示例：OHLC图表

翻译|使用教程|编辑：吴园园|2020-04-08 16:36:58.593|阅读 239 次

概述：此示例显示了使用OHLC系列的OHLC图表的基本实现。

相关链接：

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 }
)

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应用于商业用途，欢迎。

关注下方的微信公众号，及时获取产品最新资讯▼▼▼