如何使用 LightningChart 创建 JavaScript 散点图？

这个图表将可视化一个XY坐标列表和一个自定义属性，这些自定义属性可以与UI文本元素一起显示，实现与用户的鼠标操作互动。
什么是散点图/strong>
散点图或散点图是一种数学可视化，其目的是直观地表示两个数字变量之间的相关关系。其中相关性是指在散点图中变量间的比较，可以通过散点图看到一定的相关性
由于该图使用笛卡尔坐标来直观表示两个变量，每个变量在每个轴 (X, Y) 上一个，如果变量相关，则点将形成一条线。
那么，什么时候会使用散点图呢常情况下，当有两个定量变量且因变量对其自变量的每一个值都有几个值时，就会使用这种类型的图表。
如何创建散点图/strong>
该图表将使用 LightningChart for JavaScript 创建，您可以访问 LightningChart JS 站了解更多信息。 
使用 LightningChart JS 创建散点图非常简单，下面是一个简单的代码片段，它可以帮助您：

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

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

将自定义属性附加到数据点

在为 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 文本元素/strong>
接下来，我们将在每个散点坐标旁边添加标签。这些将显示自定义数据点属性，并在用户将鼠标移近时激活。

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

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技术交流群，获取最新产品咨询：740060302

想了解Lightning Charts JS 购买/授权/试用下载，欢迎咨询客服。

标签：