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

此圖表將可視化 XY 坐標(biāo)列表以及一個(gè)額外的自定義屬性，該屬性只是一段文本。這些自定義屬性將與 UI 文本元素一起顯示，這些元素將與用戶的鼠標(biāo)移動(dòng)進(jìn)行交互。

LightningChart JS官方正版下載

什么是散點(diǎn)圖？

散點(diǎn)圖或散點(diǎn)圖是一種數(shù)學(xué)可視化，其目的是直觀地表示兩個(gè)數(shù)值變量之間的相關(guān)性。其中相關(guān)性是散點(diǎn)圖中表示的比較，以證明這兩個(gè)變量之間的任何可能關(guān)系。

由于該圖使用笛卡爾坐標(biāo)來直觀表示兩個(gè)變量，每個(gè)軸 (X, Y) 上都有一個(gè)，如果變量相關(guān)，這些點(diǎn)將形成一條線。

那么，什么時(shí)候使用散點(diǎn)圖呢？ 通常，只要有兩個(gè)定量變量并且因變量對(duì)其自變量的每個(gè)單個(gè)值都有多個(gè)值，就會(huì)使用這種類型的圖表。

如何創(chuàng)建散點(diǎn)圖？

該圖表將使用 LightningChart for JavaScript 創(chuàng)建，您可以通過訪問慧都網(wǎng)，了解更多LightningChart JS信息。

使用 LightningChart JS 創(chuàng)建散點(diǎn)圖是一件輕而易舉的事，下面是一個(gè)簡單的代碼片段：

1. 創(chuàng)建一個(gè) XY 圖表。
2. 創(chuàng)建一個(gè)點(diǎn)系列。
3. 使用包含 100 個(gè)項(xiàng)目的隨機(jī)生成的數(shù)據(jù)集填充該系列。

   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 組件可以在幾秒鐘內(nèi)準(zhǔn)備一個(gè)包含超過 1000 萬個(gè)數(shù)據(jù)點(diǎn)的交互式散點(diǎn)圖！

如何將自定義數(shù)據(jù)點(diǎn)屬性附加到散點(diǎn)圖？

在向 Lightning Chart JS 提供數(shù)據(jù)時(shí)，我們采用 JavaScript 對(duì)象的格式，它允許任意數(shù)量的鍵：值組合。在前面的代碼片段中，我們看到了創(chuàng)建具有 X 和 Y 屬性的 JavaScript 對(duì)象：

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

添加自定義數(shù)據(jù)點(diǎn)屬性就像人們猜想的一樣簡單：在 x 和 y 之后添加它們：

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

這些自定義屬性可以用于數(shù)據(jù)光標(biāo)、從鼠標(biāo)位置求解數(shù)據(jù)點(diǎn)等。在本例中，我們將使用它們與 UI 文本元素。

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

接下來，我們將在每個(gè)散點(diǎn)坐標(biāo)旁邊添加標(biāo)簽。這些將顯示自定義數(shù)據(jù)點(diǎn)屬性并在用戶將鼠標(biāo)靠近它們時(shí)激活。

此代碼添加一個(gè)標(biāo)簽，將其放置在數(shù)據(jù)點(diǎn)旁邊，并將其設(shè)置為顯示數(shù)據(jù)“自定義”屬性中的文本。

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

我們也可以在這里做一個(gè)小技巧，這將對(duì)我們以后有很大的幫助。讓我們向數(shù)據(jù)點(diǎn)添加另一個(gè)自定義屬性 - UI 文本元素。

point.label = label

最后一步是跟隨用戶的鼠標(biāo)移動(dòng)并通過將最近的數(shù)據(jù)點(diǎn)著色為純白色來激活它。這個(gè)代碼怪物看起來來勢(shì)洶洶，但至少這個(gè)想法很簡單：

當(dāng)用戶將鼠標(biāo)移動(dòng)到數(shù)據(jù)點(diǎn)時(shí)，顏色標(biāo)簽將變?yōu)榘咨?。

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) }))
   }
})

最終結(jié)果

 這是嵌入圖表的最終結(jié)果。通過單擊嵌入圖表右上角的圖標(biāo)，可以在 GitHub 中找到完整的源代碼。

如果您想了解更多有關(guān) LightningChart JS 圖表的信息，您可以瀏覽該庫并熟悉所有交互式示例。

加入LightningChart技術(shù)交流群：786598704 ，了解更多咨詢。

Lightning Chart 提供各種主題 (UI)，這種類型的圖表可以用于移動(dòng)應(yīng)用程序、Web 應(yīng)用程序和桌面應(yīng)用程序。 可能性很多，可以幫助您提供更完整、更專業(yè)的產(chǎn)品。更多案例探究，點(diǎn)擊LightningChart JS 使用教程了解更多信息。

想要了解或購買LightningChart JS正版授權(quán)的朋友，歡迎咨詢