LightningChart JS是一款高性能的JavaScript圖標(biāo)庫(kù)，專(zhuān)注于實(shí)時(shí)數(shù)據(jù)可視化，以“快如閃電”享譽(yù)全球，是Microsoft Visual Studio數(shù)據(jù)展示速度最快的2D和3D圖表制圖組件，可實(shí)時(shí)呈現(xiàn)超過(guò)10億數(shù)據(jù)點(diǎn)的海量數(shù)據(jù)。

LightningChart .JS | 下載試用

本文將帶來(lái)如何使用 LightningChart 創(chuàng)建 JavaScript 散點(diǎn)圖，主要從2個(gè)方面講解，一是LightningChart JS XY 圖表的功能應(yīng)用，二是講解如何使用 LightningChart JS 創(chuàng)建嵌入式散點(diǎn)圖并向其添加自定義交互功能。

• 創(chuàng)建 XY 圖表。
• 創(chuàng)建點(diǎn)系列。
• 使用包含 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()
})))

將自定義屬性附加到數(shù)據(jù)點(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)屬性就像人們猜測(cè)的那樣簡(jiǎn)單：在 x 和 y 之后添加它們：

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

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

此代碼添加一個(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è)小標(biāo)識(shí)，這對(duì)我們以后的工作會(huì)有很大幫助。讓我們?yōu)閿?shù)據(jù)點(diǎn)添加另一個(gè)自定義屬性--UI文本元素。

point.label = label 

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

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é)果。單擊嵌入式圖表右上角的圖標(biāo)，可以在 GitHub 中找到完整的源代碼。

歡迎加入LightningChart技術(shù)交流群，獲取最新產(chǎn)品咨詢(xún)：740060302

想了解Lightning Charts JS 購(gòu)買(mǎi)/授權(quán)/試用下載，歡迎咨詢(xún)。