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

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

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

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

LightningChart JS是Web上性能最高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画。非常适合用于贸易,工程,航空航天,医药和其他领域的应用。

点击下载LightningChart JS最新试用版

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

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应用于商业用途,欢迎咨询慧都在线客服

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



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:LightningChart JS https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0201-ohlc.html

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
LightningChart JS

性能最高的JavaScript图表库,专注于实时数据可视化。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat