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

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

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！

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

标签：