彩票走势图

JavaScript图表库LightningChart JS交互示例:点线系列

翻译|使用教程|编辑:吴园园|2019-09-17 14:47:22.270|阅读 261 次

概述:本系列文章将为您介绍JavaScript图表库LightningChart JS交互示例,此示例显示如何绘制点线系列。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

点击下载LightningChart JS最新版

点线系列

也称为线系列,折线图,折线图和带标记的线。

此示例显示了具有“标记”的线系列的基本用法,用于数据点的可视化表示。与线系列类似,它在笛卡尔坐标系上绘制,表示两个变量之间的关系。线系列将信息显示为由任意方向上的直线段连接的一系列数据点。此类系列还在数据集中指定的位置的行顶部绘制数据标记。

可以使用几行简单的代码创建图表:

// Add a line series with markers using default X and Y axes.const lineSeries = chart.addPointLineSeries()

带有标记的线系列可以单独指定标记和线条的样式。

lineSeries
    .setStrokeStyle(lineStyleObject)
    .setPointFillStyle(fillStyleObject)

它与PointSeries共享相同的API,允许配置数据标记的可视化表示。

PointShape:枚举

PointShape

描述

长方形

该系列具有矩形点

三角形

该系列有三角形点。

广场

该系列有方形点。


必须在创建系列时指定PointShape!

// Add a line series with markers using default X and Y axes. Select Circle PointShape.const lineSeries = chart.addPointLineSeries( { pointShape: PointShape.Circle } )

PointSize:数字

lineSeries.setPointSize(5.0)
IndividualPointFill:FillStyle

样式表示每个点着色的个体。该样式允许使用从输入中获取的单个填充。
该系列可以接受格式的点 如果在输入数据点期间没有提供颜色(例如格式),则使用可配置的后备颜色。

{ x: number, y: number, color: Color }{ x: number, y: number } 
// Create the instance of IndividualPointFill fill style.const individualStyle = new IndividualPointFill()// Set red color as a fallback color
individualStyle.setFallbackColor( ColorRGBA( 255, 0, 0 ) )

如前所述,该系列使用指定的IndividualPointFill 接受格式的点,以启用单个点着色或其他填充样式。一次调用可以添加任意数量的点,类似于带有点标记的线序列。

{ x: number, y: number: color: Color }{ x: number, y: number }

没有颜色的数据集。如果指定了IndividualPointFill,则使用后备颜色。否则,使用指定的填充样式。

// Dataset of Vec2 data points without color.
lineSeries
    .add([
        { x: 5, y: 10 },
        { x: 7.5, y: 20 },
        { x: 10, y: 30 }
    ])

具有单独颜色的数据集。如果指定了IndividualPointFill,则使用数据点或后备颜色的颜色。否则,使用指定的填充样式。

// Dataset of Vec2Color data points with individual color.
lineSeries
    .add([
        // use red color if IndividualPointFill is specified
        { x: 2.5, y: 0, color: ColorRGBA( 255, 0, 0 ) },
        // use fallback color if IndividualPointFill is specified
        { x: 5, y: 10 },
        // use green color if IndividualPointFill is specified
        { x: 7.5, y: 20, color: ColorRGBA( 0, 255, 0 ) },
        // use blue color if IndividualPointFill is specified
        { x: 10, y: 30, color: ColorRGBA( 0, 0, 255 ) },
    ])

 推荐阅读:

JavaScript图表库LightningChart JS最新版本v1.0.0发布|附下载

=====================================================

如果你想LightningChart JS应用于商业用途,欢迎。

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

JavaScript图表库LightningChart JS交互示例:点线系列


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP