LightningChart JS 是Web上性能最高的圖表庫具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫。用于貿易，工程，航空航天，醫藥和其他領域的應用。

點擊下載LightningChart JS 最新試用版

這是對 LightningChart JS XY 圖表一些有趣功能的快速技術研究，以及如何使用 LightningChart JS 創建嵌入式散點聊天和添加自定義交互。

此圖表將可視化一個 XY 坐標列表以及一個額外的自定義屬性，它只是一段文本。這些自定義屬性將與 UI 文本元素一起顯示，這些元素將與用戶的鼠標移動交互。

我們將介紹的突出功能是：

• 什么是散點圖？
• 如何創建散點圖？
• 如何將自定義屬性附加到數據點。
• 如何創建交互式 UI 文本元素。
• 最終結果

什么是散點圖？

由于圖表使用笛卡爾坐標來直觀表示兩個變量，每個軸 (X, Y) 上一個，如果變量相關，則點將形成一條線。

那么，什么時候使用散點圖呢？ 通常，只要有兩個定量變量并且因變量的自變量的每個值都有多個值，就會使用這種類型的圖表。 

如何創建散點圖？

該圖表將使用 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，您可能想知道這張圖表有何特別之處？

在 LightningChart，我們盡可能快地完成所有工作——我們剛剛使用的 Point Series 組件可以在幾秒鐘內準備一個包含超過 1000 萬個數據點的交互式散點圖！

我們的秘密是什么？硬件加速的圖形和長期致力于支持要求苛刻的數據可視化應用程序。

如何將自定義數據點屬性附加到散點圖？

當為 Lightning Chart JS 提供數據時，我們采用 JavaScript 對象的格式，它允許任意數量的鍵：值組合。在前面的代碼片段中，我們看到了創建具有 X 和 Y 屬性的 JavaScript 對象：

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

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 中找到完整的源代碼。