彩票走势图

JavaScript图表库LightningChart JS交互示例:散点图

翻译|使用教程|编辑:吴园园|2019-08-30 13:59:11.470|阅读 649 次

概述:本系列文章将为您介绍JavaScript图表库LightningChart JS交互示例,本篇文章将为您带来散点图。

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

相关链接:

JavaScript图表库LightningChart JS交互示例:散点图

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

点击下载LightningChart JS最新试用版

散点图

此示例显示了一个简单的散点图,其中使用PointSeries绘制了点,用于数据点'标记'的可视化表示。点图是在笛卡尔坐标系上绘制的一种图表或数学图,表示两个变量之间的关系。

此类型的系列不包含用于连接数据点的线的可视化表示,而仅包含数据“标记”。

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

// Add a scatter series with markers using default X and Y axes.const pointSeries = chart.addPointSeries()

PointSeries API允许配置数据标记的可视化表示。 

PointShape:枚举

PointShape

描述

长方形

该系列具有矩形点

三角形

该系列有三角形点。

广场

该系列有方形点。

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

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

PointSize:数字

pointSeries
    .setPointSize(5.0)

带标记的FillStyle Scatter系列可以指定数据标记的填充样式以及单个点填充样式(进一步说明)

pointSeries
    .setPointFillStyle(fillStyleObject)

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.
pointSeries
    .add([
        { x: 5, y: 10 },
        { x: 7.5, y: 20 },
        { x: 10, y: 30 }
    ])

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

// Dataset of Vec2Color data points with individual color.
pointSeries
    .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应用于商业用途,欢迎。

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

图片2.jpg


标签:

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

文章转载自:

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP