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

本系列文章将为您介绍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！

// 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 colorindividualStyle.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应用于商业用途，欢迎咨询在线客服。

标签：