半岛权威十大直营(官方)网站

LightningChart JS是一款高性能的JavaScript图标库，专注于实时数据可视化，以“快如闪电”享誉全球，是Microsoft Visual Studio数据展示速度最快的2D和3D图表制图组件，可实时呈现超过10亿数据点的海量数据。

LightningChart .JS | 下载试用

本文将带来如何使用 LightningChart 创建 JavaScript 散点图，主要从2个方面讲解，一是LightningChart JS XY 图表的功能应用，二是讲解如何使用 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 文本元素一起使用。

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

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 购买/授权/试用下载，欢迎咨询。