使用JS图表控件 LightningChart? 创建 JS 散点图示例

什么是散点图/strong>

散点图或散点图是一种数学可视化，其目的是直观地表示两个数值变量之间的相关性。其中相关性是散点图中表示的比较，以证明这两个变量之间的任何可能关系。

由于该图使用笛卡尔坐标来直观表示两个变量，每个轴 (X, Y) 上都有一个，如果变量相关，这些点将形成一条线。

那么，什么时候使用散点图呢通常，只要有两个定量变量并且因变量对其自变量的每个单个值都有多个值，就会使用这种类型的图表。

如何创建散点图/strong>

该图表将使用 LightningChart for JavaScript 创建，您可以通过访问 ，了解更多LightningChart JS信息。

使用 LightningChart JS 创建散点图是一件轻而易举的事，下面是一个简单的代码片段：

1. 创建一个 XY 图表。
2. 创建一个点系列。
3. 使用包含 100 个项目的随机生成的数据集填充该系列。

   const chart = lightningChart().ChartXY()const pointSeries = chart.addPointSeries()pointSeries.add(new Array(100).fill(0).map(() => ({x: Math.random(),y: Math.random()})))

在 LightningChart中使用 Point Series 组件可以在几秒钟内准备一个包含超过 1000 万个数据点的交互式散点图！

如何将自定义数据点属性附加到散点图/strong>

在向 Lightning Chart JS 提供数据时，我们采用 JavaScript 对象的格式，它允许任意数量的键：值组合。在前面的代码片段中，我们看到了创建具有 X 和 Y 属性的 JavaScript 对象：

const point = { x: 0, y: 0 }

添加自定义数据点属性就像人们猜想的一样简单：在 x 和 y 之后添加它们：

const point = { x: 0, y: 0, custom: 'abcdefg' }  

这些自定义属性可以用于数据光标、从鼠标位置求解数据点等。在本例中，我们将使用它们与 UI 文本元素。

如何添加交互式 UI 文本元素

接下来，我们将在每个散点坐标旁边添加标签。这些将显示自定义数据点属性并在用户将鼠标靠近它们时激活。

此代码添加一个标签，将其放置在数据点旁边，并将其设置为显示数据“自定义”属性中的文本。

const label = chart.addUIElement(   UIElementBuilders.TextBox,   { x: xAxis, y: yAxis })label   .setPosition(point)   .setMargin({ bottom: 10 })   .setText(point.custom)

我们也可以在这里做一个小技巧，这将对我们以后有很大的帮助。让我们向数据点添加另一个自定义属性 – UI 文本元素。

point.label = label

最后一步是跟随用户的鼠标移动并通过将最近的数据点着色为纯白色来激活它。这个代码怪物看起来来势汹汹，但至少这个想法很简单：

当用户将鼠标移动到数据点时，颜色标签将变为白色。

chart.onSeriesBackgroundMouseMove((_, event) => {   const nearestDataPoint = pointSeries.solveNearestFromScreen(chart.engine.clientLocation2Engine(event.clientX, event.clientY))   if (nearestDataPoint) {      label.setFillStyle(new SolidFill({ color: ColorRGBA(255, 255, 255) }))   }})

最终结果

这是嵌入图表的最终结果。通过单击嵌入图表右上角的图标，可以在 GitHub 中找到完整的源代码。

如果您想了解更多有关 LightningChart JS 图表的信息，您可以浏览该库并熟悉所有交互式示例。

加入LightningChart技术交流群：786598704 ，了解更多咨询。

Lightning Chart 提供各种主题 (UI)，这种类型的图表可以用于移动应用程序、Web 应用程序和桌面应用程序。可能性很多，可以帮助您提供更完整、更专业的产品。更多案例探究，点击LightningChart JS 使用教程了解更多信息。

想要了解或购买LightningChart JS正版授权的朋友，欢迎咨询官方客服

标签：