本文是對LightningChart JS XY 圖表的一些有趣功能的快速技術介紹，以及如何使用 LightningChart JS 創建嵌入式散點聊天并為其添加自定義交互。

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

LightningChart JS官方正版下載

什么是散點圖？

散點圖或散點圖是一種數學可視化，其目的是直觀地表示兩個數值變量之間的相關性。其中相關性是散點圖中表示的比較，以證明這兩個變量之間的任何可能關系。

由于該圖使用笛卡爾坐標來直觀表示兩個變量，每個軸 (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中使用 Point Series 組件可以在幾秒鐘內準備一個包含超過 1000 萬個數據點的交互式散點圖！

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

在向 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正版授權的朋友，歡迎咨詢